type
status
date
slug
summary
tags
category
icon
password
响应式原理
即双向绑定
Vue2 使用的是 Object.defineProperty Vue3 使用的是 Proxy
2.0的不足
对象只能劫持 设置好的数据，新增的数据需要Vue.Set(xxx) 数组只能操作七种方法，修改某一项值无法劫持。数组的length修改也无法劫持
reactive和effect的实现
Vue3 的响应式原理依赖了 Proxy 这个核心 API，通过 Proxy 可以劫持对象的某些操作。
track trigger
实现track
实现trigger
完善reactive
总结（其实可以从这里看再往回找） 每个响应式的值都会被劫持getset 第一次get时会将使用get的函数传入effect effect会用全局变量对这个函数进行记录 并执行这个函数 执行这个函数时会触发proxy代理的get函数 从而触发track track会创建如图的数据结构 将之前记录的全局变量函数加入deps 当set被触发时会触发trigger trigger会将之前记录的函数进行重新执行 记录的函数一般都为改变dom的行为 此时就有自动改变dom的效果 即数据响应式
来点补充
Vue3中 原始数据类型转为响应式数据类型 有ref和reactive两种方法（当然还有shallowref等 这里说一下两类） reactive就是像文中那样用Proxy劫持getter和setter ref是用的Class类 利用class的get和set属性来劫持这个数据 对一个类求值只能用它的属性 vue中定义的是value属性 这就是ref需要.value来获取和更改值的原因 还有一些详细的 比如ref中如果是对象类型 会转为reactive处理
- 作者:MasterYe
- 链接:https://www.masterye.xyz//article/vue1
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。