当前位置：首页 > 工具系统 > 防关联工具 > vue 计算属性未重新计算 / computed 未触发 / computed 原理&源码分析

vue 计算属性未重新计算 / computed 未触发 / computed 原理&源码分析

时间：2024-03-28 12:05:56 来源：网络cs 作者：利杜鹃栏目：防关联工具阅读：

点击可打开demo
在这里插入图片描述
这里在一秒后改了数组里value属性的值
虽然数据有更新，但打开控制台，可以发现computed函数只在初始化时执行了一次

按理说一秒后改变了value值，应该执行两次才对呀？
但如果computed属性这样写，明确写明展开了每一项，获取到了value属性，就能执行第二次
在这里插入图片描述
vue的文档里提到，计算属性的方法只应该有单纯的计算，不要产生其他效果，像我们上面的demo，虽然数据有更新，但console.log没打印，这里的console.log其实就算是文档里的side effects

为什么会有这种表现呢？

看看vue的源码吧！顺便学习一下computed是如何实现的！

这里先说整体思路
这里用了proxy，对所有响应式对象加proxy，这样就能改他们的get和set等方法，然后当读取计算属性时，执行computed里的方法，执行的时候，会读取到其依赖的响应式对象，因为之前改了他们的set方法，所以此时能知道读取的是哪个对象的什么属性，此时就能把他加到computed属性的依赖中。但依赖的值发生改变，因为用proxy改过其get方法，同时之前收集过依赖，知道这个依赖值被哪些值所依赖，就能去触发更改。
接着看实际实现
我们对变量设为响应式对象，会用ref方法，ref方法的实现中调用了toReactive 在这里插入图片描述
toReactive调用了reactive

reactive调用createReactiveObject，并把mutableHandlers传入了参数
在这里插入图片描述

createReactiveObject使用了proxy，把mutableHandlers作为proxy的handler
在这里插入图片描述

然后我们看看handler是怎么做的在这里插入图片描述

在这里插入图片描述
可以看到当get时，即获取响应式对象值时，调用了track方法，这里就是在收集依赖了，当我们在computed方法获取响应式对象时，这个computed就作为了target传入去，现在看看track方法做了什么

这里是{target -> key -> dep}的两个map，target就是每一个响应式对象，key就是这个对象上的属性名，dep里就存放了依赖这个属性的响应式对象列表，可以看到下面trackEffects函数里，有一行dep.add(activeEffect)
在这里插入图片描述
这里的activeEffect就是当前在运行的响应式对象，就是computed计算属性，被加到dep里了。因此，在computed里用到的其他响应式对象，当computed被执行时，其他响应式对象对应属性里就会维护一个列表，列表里放的是依赖这个属性的响应式对象，依赖收集完成。
之后就是触发了
这里用proxy改了set方法，会去调用trigger函数

在这里插入图片描述
看看trigger函数如何实现
trigger函数的target是改了值的响应式对象本身，key是更改的属性名，然后从刚刚说的{target -> key -> dep}两个map里，拿到依赖这个对象这个key的列表deps，这里还能看到如果改的是length，还会有额外操作，感兴趣的可以去看源码，在effect.ts文件。
之后就调用triggerEffects方法，参数其实就是deps，在这里插入图片描述

然后就会去调用triggerEffect（说实话，我还没看到为啥355和360行的代码要这样写），这里如果有scheduler就会去执行，这里的scheduler是构造函数的第二个参数在这里插入图片描述

能找到是在ComputedRefImpl的构造函数赋值的，这里会把dirty改为true，然后会调用triggerRefValue 在这里插入图片描述
triggerRefValue有调用triggerEffects了，是不是很熟悉？没错是解决假设你的计算属性被其他计算属性所以的，就会继续triggerEffects下去
那实际在哪里改变值呢？还记得刚刚把dirty改为true了吗？computed的实现了，get函数如果dirty为true，就会重新计算在这里插入图片描述
这样，computed就更新了。