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的触发都需要手动执行。

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

相关推荐
栈老师不回家6 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙12 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
小远yyds36 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果1 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长1 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云3 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
GIS程序媛—椰子4 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js