vue採坑一全域性API

vue.set( target, key, value )，

target不能是 vue 例項，或者 vue 例項的根資料物件，因為原始碼中做了如下判斷：

var ob =(target).__ob__;
if (target._isvue || (ob &&ob.vmcount))

target._isvue阻止了給vue例項新增屬性，ob && ob.vmcount阻止了給vue例項的根資料物件新增屬性。

如果vue能檢測到delete操作，那麼就不會出現這個api。如果一定要用delete來刪除$data的屬性，那就用vue.delete，否則不會觸發dom的更新。

同vue.set，vue.delete( target, key )的target不能是乙個 vue 示例或 vue 示例的根資料物件。原始碼中的阻止方式和vue.set相同。

在2.2.0+ 版本中target若為陣列，key則是陣列下標。因為vue.delete刪除陣列實際是用splice來刪除，delete雖然能用於刪除陣列，但位置還在，不能算真正的刪除。

var a = [1, 2, 3];
delete a[0];
console.log(a); 
//[undefined, 2, 3]

vue.use 原始碼比較簡單，可以全部貼出來。

vue.use = function
(plugin) 
//additional parameters
var args = toarray(arguments, 1);
args.unshift(
this
);    
if (typeof plugin.install === 'function')  
else
if (typeof plugin === 'function') 
installedplugins.push(plugin);
return
this
};

安裝的外掛程式放到了 installedplugins ，安裝外掛程式前通過installedplugins.indexof(plugin)來判斷外掛程式是否被安裝過，進而阻止註冊相同外掛程式多次。

外掛程式型別為 object，必須指定 install 屬性來安裝外掛程式（

vue.use(
}, 'a', 'b', 'c')

'use strict'
vue.use(function plugin() , 'a', 'b', 'c')

配置項data必須為function，否則配置無效。data的合併規則原始碼如下：

strats.data = function
(  parentval,
childval,
vm)     
return
mergedataorfn(parentval, childval)
}  return
mergedataorfn(parentval, childval, vm)
};

傳入非function型別的data（上圖中data配置為），在合併options時，如果data不是function型別，開發版會發出警告，然後直接返回了parentval，這意味著extend傳入的data選項被無視了。

我們知道例項化vue的時候，data可以是物件，這裡的合併規則不是通用的嗎？注意上面有個if(!vm)的判斷，例項化的時候vm是有值的，因此不同於vue.extend，其實下面的注釋也做了說明（in a vue.extend merge, both should be function），這也是官方文件為何說data是個特例。

另外官方文件所說的「子類」，是因為vue.extend返回的是乙個「繼承」vue的函式，原始碼結構如下：

vue.extend = function
(extendoptions) ;
sub.prototype =object.create(super.prototype);
sub.prototype.constructor =sub;
//***
return sub

vue採坑一全域性API

vue採坑記錄

vue 的全域性API

vue的全域性api

vue採坑一 全域性API

vue採坑記錄

vue 的全域性API

vue的全域性api

相關推薦

vue採坑一全域性API