Vue Mining Pit One: Global API

Vue.set

Vue.set (target, key, value),target cannot be a Vue instance, or the root data object of the Vue instance, because the source code makes the following judgments:

var ob = (target). __ob__; if (Target._isvue | | (ob && ob.vmcount)) {"development"!== ' production ' && warn (    ' Avoid adding reactive properties to a Vue instance or It root $data ' +    ' at Runtime-declare it upfront in the data option. ' ); return Val}

Target._isvue blocked adding properties to the Vue instance,ob && ob.vmcount blocked adding properties to the root data object of the Vue instance.

Vue.delete

If Vue detects a delete operation, then this API will not appear. If you must use Delete to delete the $data property, use Vue.delete, otherwise the DOM update will not be triggered.

The target of the same vue.set,vue.delete (target, key) cannot be the root data object of a Vue sample or Vue sample. The source code is blocked in the same way as Vue.set.

In the 2.2.0+ version, target is an array, and key is the subscript. Because the Vue.delete delete array is actually deleted with splice, delete can be used to delete the array, but the location is still there and cannot be counted as a real delete.

var a = [1, 2, 3]; Delete a[0//  [Undefined, 2, 3]

Vue.use

Vue.use source code is relatively simple, can be all posted out.

Vue.use =function(plugin) {varInstalledplugins = ( This. _installedplugins | | ( This. _installedplugins = [])); if(Installedplugins.indexof (plugin) >-1) {        return  This    }    //Additional Parameters    varargs = ToArray (arguments, 1); Args.unshift ( This); if(typeofPlugin.install = = = ' function ') {plugin.install.apply (plugin, args); } Else if(typeofPlugin = = = ' function ') {plugin.apply (NULL, args);    } installedplugins.push (plugin); return  This};

Installed plug-ins are placed in the Installedplugins, before installing the plug-in installedplugins.indexof (plugin) to determine whether the plug-in has been installed, thereby preventing the registration of the same plugin multiple times.

The plug-in type is object, you must specify the install property to mount the plug-in ( < Span style= "color: #ff6600;" >typeof Plugin.install = = = ' function ') , plus plug-in execution using plugin.install.apply (plugin, args); , so this accesses other properties of object. The args here are made by Vue (args.unshift (this); ) and vue.use incoming other parameters except plugin (toarray (arguments, 1 ), 1 means intercept from arguments[1].

vue.use ({    1,    function  (Vue) {        Console.log (this///  1        //  [function Vue (options), "A", "B", "C"]    ' A ', ' B ', ' C ')

The plug-in type is function, the installation calls plugin.apply (null, args), so in strict mode the plug-in runtime context this is NULL, and the non-strict mode is Window.

' Use strict ' vue.use (function plugin () {    Console.log (this)//null    console.log (arguments)//[function Vue ( Options), "A", "B", "C"]}, ' A ', ' B ', ' C ')

Vue.extend

The configuration item data must be a function, otherwise the configuration is invalid. The data merge rule source code is as follows:

Strats.data =function(Parentval, Childval, VM) {if(!vm) {if(Childval &&typeofChildval!== ' function ') {      "Development"!== ' production ' &&Warn (' The ' data ' option should is a function ' + ' that returns a Per-instance value in component ' + ' definitions .‘, VMS); returnParentval}returnMERGEDATAORFN (Parentval, Childval)}returnMERGEDATAORFN (Parentval, Childval, VM)};

Incoming non-function type data (medium data is configured as {a:1}), when merging options, if data is not a function type, the development will issue a warning and then return directly to Parentval. This means that the Extend incoming data option is ignored.

We know that when the Vue is instantiated, data can be an object, and the merge rules here are not universal? Note that there is an if (!VM) judgment, the VM is a value when instantiated, so different from vue.extend, in fact, the following comments are also explained (in a vue.extend the merge, both should be function), which is why the official document says data is a special case.

In addition, the official document says "subclass", because Vue.extend returns a "Inherit" Vue function, the source structure is as follows:

Vue.extend =function(extendoptions) {//***    varSuper = This; varSuperid =Super.cid; //***    varSub =functionvuecomponent (options) { This. _init (options);    }; Sub.prototype=object.create (Super.prototype); Sub.prototype.constructor=Sub; //***    returnSub

Vue Mining Pit One: Global API