vue2和vue3响应式实现区别
2023-06-13 09:14:16 时间
vue2.x的响应式
实现原理:
对象类型:通过Object.defineProperty()
对属性的读取、修改进行拦截(数据劫持)。
数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。
Object.defineProperty(data, 'count', {
get () {},
set () {}
})
存在问题:
- 新增属性、删除属性, 界面不会更新。
- 直接通过下标修改数组, 界面不会自动更新。
Vue3.0的响应式
实现原理:
通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。
通过Reflect(反射): 对源对象的属性进行操作。
MDN文档中描述的Proxy与Reflect:
Proxy:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Reflect:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
new Proxy(data, {
// 拦截读取属性值
get (target, prop) {
return Reflect.get(target, prop)
},
// 拦截设置属性值或添加新属性
set (target, prop, value) {
return Reflect.set(target, prop, value)
},
// 拦截删除属性
deleteProperty (target, prop) {
return Reflect.deleteProperty(target, prop)
}
})
proxy.name = 'tom'
相关文章
- Vue3源码02: 项目构建流程和源码调试方法
- Vue3源码04: Vue3响应式系统源码实现1/2
- Vue3源码08: 虚拟Node到真实Node的路其实很长
- 站在巨人的肩膀上--用VUE3试试搞个在线IDE吧!
- Vue3中的条件渲染
- Vue3 $emit指南--包含选项API、组合API以及 setup 语法糖
- 使用Vue3实现【羊了个羊】的算法方面全面解析!
- vue3获取原始对象方法,禁止响应式toRaw
- Vue3.0商店后台管理系统项目实战-vue3搭配Element Plus框架使用
- vue3的h函数以及tsx写法
- 开心档之Vue3 计算属性
- Vue3 响应式 API 之 ref 和 reactive
- 面试官问:vue2和vue3的区别有哪些?
- Vue3学习Day1 有哪些新特性?解决了Vue2的那些问题?
- 【Vue3】利用vite创建vue3项目
- vue3 中 pinia 的 state 修改模版绑定的 state 数据没更新?
- 开心档之Vue3