0基础深入了解Vue3响应式原理(一)

课程链接:www.vuemastery.com/courses/vue...

先看如下代码:

js 复制代码
 const product = { price: 5, quantity: 2 };
 let total = 0;
 let effect = () => (total = product.price * product.quantity);
 ​
 effect();
 console.log(total); // --> 10
 product.quantity = 3;
 console.log(total); // --> 10

更改product.quantity = 3后,再次打印total,其值显然还是原来的10,因为product.quantity并不是响应式属性。

要将其变成响应式,也就是需要追踪product.quantity所关联的依赖,也就是effect函数,然后在product.quantity发生改变时触发effect执行才可。

追踪单个属性

我们需要有个地方,追踪依赖了product.quantity属性的effect,只有这样,当该属性发生变动时,就能找到依赖该属性的effect,然后遍历执行这些effect

而这个地方需要满足两个条件:

  • 存储的依赖能自动去重
  • 能遍历

Set对象刚好满足上述条件。

修改代码,增加依赖收集对象,增加追踪依赖函数,如下:

js 复制代码
 const product = { price: 5, quantity: 2 };
 let total = 0;
 let effect = () => (total = product.price * product.quantity);
 // 1.新增依赖收集对象
 const dep = new Set();
 ​
 // 2.新增追踪依赖函数
 const track = () => {
   dep.add(effect);
 };
 ​
 effect();
 console.log(total); // --> 10

修改代码,增加依赖触发执行函数,如下:

js 复制代码
 const product = { price: 5, quantity: 2 };
 let total = 0;
 let effect = () => (total = product.price * product.quantity);
 // 1.新增依赖收集对象
 const dep = new Set();
 ​
 // 2.新增追踪依赖函数
 const track = () => {
   dep.add(effect);
 };
 ​
 // 3.新增依赖触发执行函数
 const trigger = () => {
   dep.forEach((effect) => effect());
 };
 ​
 effect();
 console.log(total); // --> 10

之后在修改属性值的时候,触发依赖的执行即可。

初始时,需要触发track函数收集依赖,在product.quantity修改的时候,触发trigger函数,接着打印total验证响应是否成功:

js 复制代码
 // ...省略以上代码
 effect();
 ​
 //4.初始时,触发track收集依赖
 track();
 console.log(total); // --> 10
 ​
 product.quantity = 3;
 // 5.修改变量后,触发triger执行依赖
 trigger();
 console.log(total); // --> 15

成功!!!可以看到,当我们修改了product.quantity属性,然后执行trigger函数后,total值已经跟着一起改变!

总结

  • 新增dep对象收集依赖,该对象是Set结构。

  • 新增track函数,该函数收集依赖了该属性的effect,将其保存到dep中。

    • 初始时触发track函数收集依赖。
  • 新增trigger函数,该函数遍历dep对象,并执行其中的effect

    • 在属性值进行更新后,触发trigger函数遍历执行effect

问题

以上有两个问题:

  • 只能追踪单个属性的依赖。
  • 依赖的收集track和依赖的执行trigger的触发都需要手动执行。

以上问题,在接下来两节中完善。

相关推荐
醉の虾10 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
chusheng184032 分钟前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
游走于计算机中摆烂的1 小时前
启动前后端分离项目笔记
java·vue.js·笔记
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
码蜂窝编程官方2 小时前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
乐闻x3 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
533_4 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
ZBY520315 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
计算机毕设指导65 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
木子02046 小时前
前端VUE项目启动方式
前端·javascript·vue.js