vue2.x(data&use)

1. vue中是什么时候我们操作this.xxx会映射到this._data.xxx身上？

源码4998行 声明周期函数beforeCreate被调用 也证实了在这个周期里面我们拿不到options所有相关的东西
源码5000行 initState(vm) 开始初始化options 

源码4635行 按props->methods->data->computed->watch顺序进行每项的初始化init
源码4699行 这里拿到data赋值给了vm._data，遍历每个data里面声明的key值，判断是否与props、methods存在重名的字段 也证实了vue中data的属性可以和methods中的方法不能同名

源码4734行 遍历中执行proxy(vm,'_data',key)方法 -- 关键就是这个方法 原理就是给vm（this）定义每一个key值的getter/setter 设置获取都操作的是vm._data[key] 这里使用的是Object.defineProperty()

2. data在什么时候可定义对象什么时候必须定义为函数返回对象？

① 定义为对象可在操作Vue对象时定义为对象

const app = new Vue({
	el:'#app',
	data:{message:'卧室'}
})

② 在定义组件的时候data必须定义为函数返回对象（因为组件存在复用的情况，若定义为对象那么复用的组件其中一个改变其他组件值也跟到变化了，所以需要每个组件拥有一套对象独立的拷贝。存在对象的引用地址一样，改变一处其他也改变了）

{{message}}

3. vue中如何重置data数据？

   其实这里需要理解this.$data与this.$options.data() 我们在之前讲过vue上的data函数返回数据被vm.xxx映射了 访问的是vm._data.xxx 从源码中可以看见第一次进来获取了vm.$options.data但是后面使用getData()函数重赋值了data及vm._data后面的操作都是操作vm._data所以vm.$options.data()返回的是初始化的值未更改
   1. Object.assign(this.$data,this.$options.data())
   2. {...this.$data,...this.$options.data()}
   3. this.xxx = this.$options.data().xxxvue中use有什么作用？原理？如何使用？
   

   4.vue中use有什么作用？原理？如何使用？

   ① 最主要的作用就是安装插件 方便其他功能或组件能自定义插件快速服务于vue
   
   ② 源码5089行~源码5107行
   function initUse (Vue) {
       Vue.use = function (plugin) {
           var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
           // TODO：校验插件是否已安装 重复安装无效
           if (installedPlugins.indexOf(plugin) > -1) {
               return this
           }
           // TODO：这句作arguments参数处理 取从第1个参数后的参数
           // TODO：若es6处理[...arguments].slice(1)
           var args = toArray(arguments, 1);
           // TODO: 这里往参数集合里面首处压了个vm实例过去
           args.unshift(this);
           
           if (typeof plugin.install === 'function') {
               // TODO：给plugin.install方法绑定plugin来执行插件逻辑
               // TODO：这里args参数就很关键了 响应了上面为什么在首处压了个Vue实例过去
               // TODO：因此我们在写插件的时候install方法的第一个参数必然为Vue实例，第二个参数为				options插件配置项
               /*
               	好比：
               	function install(Vue,options){
               		// 插件业务逻辑代码
               	}
               */
               plugin.install.apply(plugin, args);
           } else if (typeof plugin === 'function') {
               // TODO：若插件不为函数则以window.plugin(Vue,options)来执行安装
               plugin.apply(null, args);
           }
           // TODO：压入集合
           installedPlugins.push(plugin);
           return this
       };
   }
   /*es5 处理arguments类数组转为数组集合
   function toArray (list, start) {
       start = start || 0;
       var i = list.length - start;
       var ret = new Array(i);
       while (i--) {
           ret[i] = list[i + start];
       }
       return ret
   }*/
   
   ③ 简易插件实例
   const install = (Vue,options) => {
       console.log('第一参数为Vue实例',Vue)
       console.log('第二参数为配置项',options)
       Vue.prototype.$testPlugin = function(){
           console.log('我是插件逻辑')
       }
   }
   export default {
       install
   }