当前位置: 首页 > Web前端 > vue.js

Vue2响应式原理

时间:2023-03-31 21:35:01 vue.js

乱摸同学-《剖析Vue.js内部运行机制》作者。阿里巴巴集团的前端工程师看了两章受益匪浅。反应式原理把数据变成可观察的(observable),key,val,cb){Object.defineProperty(obj,key,{enumerable:true,configurable:true,get:()=>{/*....依赖集合等....*//*Github:https://github.com/answershuto*/returnval},set:newVal=>{val=newVal;cb();/*订阅者接收消息的回调*/}})}classVue{constructor(options){this._data=options.data;observe(this._data,options.render)}}letapp=newVue({el:'#app',data:{text:'text',text2:'text2'},render(){控制台.log("render");}})proxy其实在vue3.0中,proxy也替代了Object.defineProperty。_proxy.call(this,options.data);/*构造函数中*//*代理*/function_proxy(data){constthat=this;Object.keys(data).forEach(key=>{Object.defineProperty(that,key,{configurable:true,enumerable:true,get:functionproxyGetter(){returnthat._data[key];},set:functionproxySetter(val){that._data[key]=val;}})});}