Vue2.0双向绑定源码分析

A:vue的双向绑定

B:vue自定义插件

C:vue混入

import Vue from "vue";
import App from "./App.vue";

const testData = { testPropA: 1 }
//A.1 在定时器中每隔两秒实现testData.testPropA的更新操作
setInterval(()=>{
  testData.testPropA = testData.testPropA + 1;
},2000);
//A.2 vue通过defineReactive函数实现对数据的双向绑定  在get中收集对象属性的所有依赖，在set中通知更新
//A.2 由此便可以实现所有testData.testPropA的调用点数据刷新
Vue.util.defineReactive(testData, 'testPropA');

//B.1 vue的插件，通过use实现插件的引入，vue会在use的时候会调用内部的install方法，install方法传入一个vue实例
function plugin() { }
plugin.install = vue => {
  //C.1 对vue混入一个对象，这个对象中可以有钩子函数，也可以有其他的vue属性，会影响该vue实例下的所有组件
  vue.mixin({
    //A.3 在vue的实例中混入一个gloablTest的data属性，其他页面可以进行调用，以观测是否defineReactive的双向绑定效果
    data() {
      return {
        gloablTest: testData
      }
    },
    created() {
    }
  });
};
//B.2 引入插件
Vue.use(plugin);

new Vue({
  render: h => h(App)
}).$mount("#app");