- 博客(6)
- 收藏
- 关注
RSS订阅原创 Vue2响应式原理四：computed
此处代码存在一个bug，当侦听器监听计算属性时，此时 Dep.target指向侦听器的 watcher，当读取属性时，会触发侦听器的 getter函数，watcher.dirty为 true，又会调用 watcher.get函数，Dep.target被重新赋值为计算属性的 watcher，导致侦听器的 watcher丢失。如果 dirty为 true，表示依赖项改变，需要重新计算。此时侦听器已经可以监听计算属性，但触发侦听器回调时，计算属性需要重新求值，可以在侦听器运行时进行读取，让计算属性重新计算。
2023-07-31 22:14:33
697
1
原创 Vue2响应式原理三：$set
实现思路：为数组和对象创建一个 __ob__属性来存储 Observer实例，并为Observer实例挂载一个 Dep实例来收集 watcher，并在 $set中手动触发。在 Observer实例在挂载一个 Dep实例，并将 Observer实例挂载到属性的 __ob__上。在 defindReactive函数中接收返回的 observer，并收集依赖。如果是数组，则将其添加到数组，并观察新增的值，如果是对象，则将其进行劫持。如果是引用数据类型，则返回 Observer实例。
2023-07-31 15:56:12
791
2
原创 Vue2响应式原理二：Watcher
实现思路：为 data中的每一个属性都创建一个 Dep实例来存储 Watcher实例，在属性的 getter函数中收集依赖，setter函数中派发任务。Watcher实例主要用来存储回调并触发。在实例化时将实例挂载到 Dep.target上方便对其进行获取，再读取属性触发属性的 getter方法，从而对watcher进行收集。实现思路：定义一个数组来收集待执行的 watcher的id，如果已经在数组中，则不再触发回调。当监听的属性改变时，会触发相应的回调函数，多次改变时，只会触发一次，并且是异步执行。
2023-07-31 14:17:44
304
1
原创 Vue2响应式原理一：数据劫持
如果是对象，则对其·进行递归遍历，并通过 Object.defineProperty对其属性进行劫持。对数组和对象的递归遍历劫持已完成，接下来将属性挂载到vue实例上方便使用。创建 Observer类，分别对 data中的数组和对象做不同的处理。将 _data和 $options挂载到 Vue实例上。如果是数组或对象，则调用 Observer类创建实例。如果是数组，则修改其原型链，并重写7个改动数组的方法。由于设置响应式后续还会使用，先将其抽取成函数。
2023-07-27 21:18:32
221
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人