前端学习案例-vue2源码解析2-数据劫持

index.js

import { initState } from "./init";
 
//传入对象参数
function Vue(options) {
  //传入options
  console.log(this, "this");
  this._init(options);
}
//初始化
Vue.prototype._init = function (options) {
  //报错实例
  var vm = this;
  vm.$options = options;
  //处理状态
  initState(vm);
};
 
export default Vue;

init.js

import proxyData from "./proxy"
function initState(vm){
  console.log(vm)
  var options=vm.$options;
  if(options.data){
    initData(vm)
  }
}
function initData(vm){
    //获取data数据
    var data=vm.$options.data
    //访问data
    data=vm._data=typeof data==="function"?data.call(vm):data||{}
    //遍历值
    for(var key in data){
        proxyData(vm,'_data',key)
    }
 
}
 
export {
    initState
}

proxy.js

 
function proxyData(vm,target,key){
    Object.defineProperty(vm,key,{
        get(){
            console.log(vm[target][key],"列表数据")
            return vm[target][key]
        },
        Set(newValue){
            vm[target][key]=newValue
        }
    })
}
 
export default proxyData