VUE计算属性原理
Posted liuyinlei
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE计算属性原理相关的知识,希望对你有一定的参考价值。
代码:
var obj = {}; var Dep = null; function defineReactive(obj,key,val){ var deps = []; //obj.a读写 Object.defineProperty(obj,key,{ //观察者模式 get:function(){ if(Dep){ //console.log("Dep is:",Dep); deps.push(Dep); } console.log("valx is:",val); return val; }, set: function(newVal){ val = newVal; deps.forEach(func => func()); } }); } //obj.b只读 function defineComputed(obj,key,func){ func = func.bind(obj); var value; Dep = function(){ value = func(); }; value = func(); //执行了 this.a-->get-->打印val = 0; Dep = null; // console.log("Dep isx:",Dep); // 大量闭包 Object.defineProperty(obj,key,{ get:function(){ return value } }); } defineReactive(obj,‘a‘,0); defineComputed(obj,‘b‘,function(){ var a = this.a; return a+1; }); console.log(obj.b); // console.log("obj.a=",obj.a); console.log("obj.a=",obj.a); obj.a +=1; //obj.a = obj.a + 1; console.log(obj.b); obj.a +=1; console.log(obj.b); obj.a +=1; console.log(obj.b);
很绕,难点是下面代码会执行两次a的get函数。第二次在set函数中的执行value = func(); func函数有this.a中执行了get。并+1赋值给闭包变量value。set函数结束之后。obj.a + 1;而
obj.a +=1; //obj.a = obj.a + 1;
以上是关于VUE计算属性原理的主要内容,如果未能解决你的问题,请参考以下文章