Vue3 升级内容

全部使用ts重写（响应式、vdom、模板编译）
性能提升，代码量减少（打包出来的内容代码量少）
会调整部分API

Object.defineProperty的缺点

深度监听需要一次性递归
无法监听新增属性/删除属性 (Vue.set Vue.delete)
无法原生监听数组，需要特殊处理

Proxy基本应用

Reflect作用

和 Proxy 能力一一对应

规范化、标准化、函数式

代替Object上的工具函数

proxy完成响应式

function reactive(target = {}) {// 不是对象、数组直接返回if(typeof target !== 'object' || target == null) {return target}const proxyConfig = {get(target, key, receiver){const ownKeys = Reflect.ownKeys(target)if (ownKeys.includes(key)) {console.log('get', key)}const result = Reflect.get(target, key, receiver)/* 深度监听修改1return result*//*性能提升：在get时去递归，去深度监听而 defineProperty 是开始时就递归完成*/return reactive(result)},set(target, key, val, receiver){if(val === target[key]){return true}/* 可监听到新增的key */const ownKeys = Reflect.ownKeys(target)if(ownKeys.includes(key)){// 已有的可以}else{// 新增的keyconsole.log('新增的key')}const result = Reflect.set(target, key, val, receiver)console.log('set', key, val)return result},deleteProperty(target, key){const result = Relect.deleteProperty(target, key)console.log('delete property', key)return result}}// 生成代理对象const observed = new Proxy(target, proxyConfig)return observed
}// 测试数据
const data = {name: 'zwx',age: '25',info: {city: 'beijing',a: {b: {c: 1}}}
}//
let newdata = reactive(data)
newdata.info.city // get info 不是 get city
newdata.info.a // b 和之后还没加入响应式newdata.info.a.b.zzz = 88

深度监听，性能更好

可监听新增/删除属性

可监听数组变化

proxy能规避defineProperty缺点

proxy无法兼容全部浏览器，无法polyfill

关注作者和知识库后续更新

Vue3 的Proxy相关推荐

从Proxy到Vue3数据绑定
导言: 本菜鸡在Vue2没多久,结果就Vue3发布了.赶紧学习和体验了一番Vue3,发现和Vue2有较大不同.其中最让我印象深刻的是他们有一个叫ref和reactive的用来绑定和更新数据.然后再略微 ...
数据双向绑定_手写 Vue3 数据双向绑定理解Proxy
前言 vue3的 Proxy 最近貌似各大网红公众号都有发,我也来蹭蹭热度写一篇吧!我们也可以结合vue2来看看vue3到底发生了些什么变化,又解决了Vue2.x的哪些痛点.接下来我们一起看看~ 目录 ...
proxy connect abort处理方法_Vue 3.0 初探 - Proxy
前言 4 月 17 日,尤大在微博上宣布 Vue 3.0 beta 版本正式发布. 在尤大发布的< Vue3 设计过程>文章中提到之所以重构 Vue 一个考量就是JavaScript新的语 ...
（六）Vue3.0预学习
Vue3.0预学习 Vue3要来了Vue2就要过时了吗 Vue3 Vue2.x马上就要过时了吗 Vue3升级内容 Proxy实现响应式 Object.defineProperty的缺点 Proxy实现 ...
react全局状态管理_rxv: 在React中用Vue3的reactivity包实现状态管理。
前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,react-easy-state,在hooks ...
2.Vue3.0 性能提升主要是通过哪几方面体现的？
一.编译阶段回顾Vue2,我们知道每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把用到的数据property记录为依赖,当依赖发生改变,触发setter,则会通知watcher ...
Vue3比Vue2有什么优势/区别
优势性能更好体积更小更好的ts支持更好的代码组织更好的逻辑抽离更多新功能 Vue3生命周期 Options API 生命周期 Composition API 生命周期 Options AP ...
面试官：Vue3.0 性能提升主要是通过哪几方面体现的？
一.编译阶段回顾Vue2,我们知道每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把用到的数据property记录为依赖,当依赖发生改变,触发setter,则会通知watcher ...
【Vue3】李南江老师讲解--个人笔记（一）
太喜欢李南江老师了,自带二倍速还可以讲的明明白白,又拥有一个有趣的灵魂~i了i了 [vue3笔记] vue2和vue3的区别: 1.vue2使用Object.defineProperty方法实现响应式 ...

Vue3 的Proxy

Vue3 升级内容

Object.defineProperty的缺点

Proxy基本应用

Reflect作用

Vue3 的Proxy相关推荐

最新文章

热门文章