前端学习案例-vue2源码解析2-数据劫持
原创
©著作权归作者所有:来自51CTO博客作者前端导师歌谣的原创作品,请联系作者获取转载授权,否则将追究法律责任
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