解析Vue.js中的computed工作原理

我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。

JS属性:

JavaScript有一个特性是 Object.defineProperty ,它能做很多事,但我在这篇文章只专注于这个方法中的一个:


var person = {};
Object.defineProperty (person, 'age', {
 get: function () {
  console.log ("Getting the age");
  return 25;
 }
});//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
console.log ("The age is ", person.age);
// Prints:
//
// Getting the age
// The age is 25

(Obeject.defineProperty是Object的一个方法,第一个参数是对象名称,第二个参数是要设置的属性名,第三个参数是一个对象,它可以设置这个属性是否可修改、可写等,而这篇文章主要使用的是Obeject.defineProperty的访问器属性,感兴趣的朋友可以自行google或者查看Js高及程序设计)
尽管 person.age 看起来像是访问了对象的一个属性,但其实在内部我们是运行了一个函数。

一个基本可响应的Vue.js

Vue.js内部构建了一个可以将普通的对象转化为可以被观察的值( 响应属性 ),下面为大家展示一个简化版的如何添加响应属性的案例:


function defineReactive (obj, key, val) {
 Object.defineProperty (obj, key, {
  get: function () {
   return val;
  },
  set: function (newValue) {
   val = newValue;
  }
 })
};
// 创建一个对象
var person = {};
// 添加可响应的属性"age"和"country"
defineReactive (person, 'age', 25);
defineReactive (person, 'country', 'Brazil');
// 现在你可以随意使用person.age了
if (person.age < 18) {
 return 'minor';
}
else {
 return 'adult';
}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
// 设置person.country的值
person.country = 'Russia';

有趣的是, 25 和 ‘Brazil' 还是一个闭包内部的变量,只有当赋给它们新值的时候 val 才会改变。 person.country 并不拥有 'Brazil' 这个值,而是getter这个函数拥有 'Brazil' 这个值。

声明一个计算属性

让我们创建一个定义计算属性的函数 defineComputed 。这个函数就跟大家平时使用computed时的一样。


defineComputed (
 person, // 计算属性就声明在这个对象上
 'status', // 计算属性的名称
 function () { // 实际返回计算属性值的函数
  console.log ("status getter called")
  if (person.age < 18) {
   return 'minor';
  }
  else {
   return 'adult';
  }
 },
 function (newValue) {
  // 当计算属性值更新时调用的函数
  console.log ("status has changed to", newValue)
 }
});
// 我们可以像使用一般的属性一样使用计算属性
console.log ("The person's status is: ", person.status);

让我们写一个简单的 defineComputed 函数,它支持调用计算方法,但目前不需要它支持 updateCallback


function defineComputed (obj, key, computeFunc, updateCallback) {
 Object.defineProperty (obj, key, {
  get: function () {
   // 执行计算函数并且返回值
   return computeFunc ();
  },//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
  set: function () {
   // 什么也不做,不需要设定计算属性的值
  }
 })
}

这个函数有两个问题:
每次访问计算属性时都会执行一次计算函数 computeFunc ()
它不知道什么时候更新 (即当我们更新某个data中的属性,计算属性中也会更新这个data属性)


// 我希望最终函数执行后是这个效果:每当person.age更新值的时候,person.status也同步更新
person.age = 17;
// console: status 的值为 minor
person.age = 22;
// console: status 的值为 adult

增加一个依赖项

让我们增加一个全局变量 Dep :


var Dep = {
 target: null
};

这是一个依赖项,接着我们用一个骚操作来更新 defineComputed 函数:


function defineComputed (obj, key, computeFunc, updateCallback) {
 var onDependencyUpdated = function () {
  // TODO
 }//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
 Object.defineProperty (obj, key, {
  get: function () {
   // 将onDependencyUpdated 这个函数传给Dep.target
   Dep.target = onDependencyUpdated;
   var value = computeFunc ();
   Dep.target = null;
  },
  set: function () {
   // 什么也不做,不需要设定计算属性的值
  }
 })
}

现在让我们回到之前设置的响应属性上:


function defineReactive (obj, key, val) {
 // 所有的计算属性都依赖这个数组
 var deps = [];
 
 Object.defineProperty (obj, key, {
  get: function () {
   // 检查是否调用了计算属性,如果调用了,Department.target将等于一个onDependencyUpdated函数
   if (Dep.target) {
    // 把onDependencyUpdated函数push到deos中
    deps.push (target);
   }
 
   return val;
  },
  set: function (newValue) {
   val = newValue;
 
   // 通知所有的计算属性,告诉它们有个响应属性更新了
   deps.forEach ((changeFunction) => {
    changeFunction ();
   });//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
  }//面向1-3年前端人员
 })
};

我们可以在计算属性定义的函数触发更新回调后更新 onDependencyUpdated 函数。


var onDependencyUpdated = function () {
 // 再次计算 计算属性的值
 var value = computeFunc ();
 updateCallback (value);
}//欢迎加入前端全栈开发交流圈一起学习交流:864305860

把它们整合到一起:
让我们重新访问我们的计算属性 person.status :


person.age = 22;
defineComputed (
 person,
 'status',
 function () {
  if (person.age > 18) {
   return 'adult';
  }
 },
 function (newValue) {
  console.log ("status has changed to", newValue)
 }//欢迎加入前端全栈开发交流圈一起学习交流:864305860
});
console.log ("Status is ", person.status);

结语

感谢您的观看,如有不足之处,欢迎批评指正。

原文地址:https://segmentfault.com/a/1190000017356237

相关推荐
<p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310007118712.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="color:#FFFF00;background-color:#FF0000;font-size:24px;"><strong>走在技术前沿之 Vue3.0 新特性全面解析。 <strong>全网抢先看,做首批 Vue 3.0 开发者!!!</strong></strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>课程内容包含:<br /> </strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>1.Vue 3.0之版本大更新</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>2.新特性重点关注</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>3.composition-api(组合式API)</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>4.初始化Vue 3.0项目</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>5.setup函数</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>6.响应式系统API(reactive、ref、computed、watch等)</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>7.响应式系统工具集(unref、toRef、toRefs、isRef、isProxy等)<br /> </strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>8.生命周期钩子函数的变化</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>9.依赖注入</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>10.模板refs</strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;">教学全程采用笔记+代码案例的形式讲解,通俗易懂!!!</span></strong> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310011021534.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310011101181.png" alt="" /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310011183568.png" alt="" /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310011275518.png" alt="" /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <span style="color:#C00000;"><strong><span><strong>补充:想学习 Vue 2.x 的同学请移步以下地址</strong></span></strong><strong><span><strong></strong></span></strong></span> </p> <p style="font-size:16px;"> <span style="color:#C00000;"><strong><span style="color:#FF0000;"><strong><a href="https://edu.51cto.com/course/10543.html"></a><a href="https://edu.csdn.net/course/detail/7906">https://edu.csdn.net/course/detail/7906</a> (</strong></span></strong><span style="color:#FF0000;"><strong><span></span></strong><strong><span></span></strong><strong><span><strong>Vue.js 2.0之全家桶系列视频课程)</strong></span></strong></span></span> </p> <p style="font-size:16px;"> <span style="color:#FF0000;"><strong><span><strong><span style="font-size:18px;"> </span></strong></span></strong></span> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"></span></strong> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong>讲师介绍</strong></span> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310012193677.jpg" alt="" /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页