Vue3要来了Vue2就要过时了吗

Vue3

Vue3尚未发布，还在开发中
面试会考察候选人对新技术的关注程度（Vue太热门）
新版本发布之后，再做补充

Vue2.x马上就要过时了吗

Vue3从正式发布到推广开发，还需要一段时间
Vue2.x应用范围非常广，有大量项目需要维护、升级
Proxy存在浏览器兼容性问题，且不能polyfill

Vue3升级内容

全部用ts重写（响应式、vdom、模板编译等）
性能提升，代码量减少
会调整部分API

Proxy实现响应式

回顾Object.defineProperty
Proxy实现响应式
两者对比

Object.defineProperty的缺点

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

Proxy实现响应式

基本使用
Reflect
实现响应式

Proxy基本使用

// const data = {//     name: 'zhangsan',
//     age: 20,
// }
const data = ['a', 'b', 'c']const proxyData = new Proxy(data, {get(target, key, receiver) {// 只处理本身（非原型的）属性const ownKeys = Reflect.ownKeys(target)if (ownKeys.includes(key)) {console.log('get', key) // 监听}const result = Reflect.get(target, key, receiver)return result // 返回结果},set(target, key, val, receiver) {// 重复的数据，不处理if (val === target[key]) {return true}const result = Reflect.set(target, key, val, receiver)console.log('set', key, val)// console.log('result', result) // truereturn result // 是否设置成功},deleteProperty(target, key) {const result = Reflect.deleteProperty(target, key)console.log('delete property', key)// console.log('result', result) // truereturn result // 是否删除成功}
})

Reflect作用

和Proxy能力一一对应
规范化、标准化、函数式
替代掉Object上的工具函数

Vue3用Proxy实现响应式

Proxy实现响应式

深度监听，性能更好
可监听新增/删除属性
可监听数组变化

// 创建响应式
function reactive(target = {}) {if (typeof target !== 'object' || target == null) {// 不是对象或数组，则返回return target}// 代理配置const proxyConf = {get(target, key, receiver) {// 只处理本身（非原型的）属性const ownKeys = Reflect.ownKeys(target)if (ownKeys.includes(key)) {console.log('get', key) // 监听}const result = Reflect.get(target, key, receiver)// 深度监听// 性能如何提升的？return reactive(result)},set(target, key, val, receiver) {// 重复的数据，不处理if (val === target[key]) {return true}const ownKeys = Reflect.ownKeys(target)if (ownKeys.includes(key)) {console.log('已有的 key', key)} else {console.log('新增的 key', key)}const result = Reflect.set(target, key, val, receiver)console.log('set', key, val)// console.log('result', result) // truereturn result // 是否设置成功},deleteProperty(target, key) {const result = Reflect.deleteProperty(target, key)console.log('delete property', key)// console.log('result', result) // truereturn result // 是否删除成功}}// 生成代理对象const observed = new Proxy(target, proxyConf)return observed
}// 测试数据
const data = {name: 'zhangsan',age: 20,info: {city: 'beijing',a: {b: {c: {d: {e: 100}}}}}
}const proxyData = reactive(data)

性能如何提升的？
只有get时递归，而且不是一次性递归，获取proxyData.info时只会到city和a这一层，不会到b、c、d、e这一层

总结

Proxy能规避Object.defineProperty的问题
Proxy无法兼容所有浏览器，无法polyfill

（六）Vue3.0预学习相关推荐

vue3.0 先遣学习
vue3.0 中文预览地址 vue3.0 github地址怎么使用vue-cli生成vue3.0的项目? 安装vue-cli v4.5以上版本 npm install -g @vue/cli vue ...
th:text为null报错_为vue3.0的学习TS解读高级类型
知识点摘要本节课主要关键词为: 自动类型推断 / 类型断言 / 类型别名(type) / 映射类型(Pick/Record等...) / 条件类型(extends) / 类型推断(infer) 自动 ...
as button onitemclicklistener为null_为vue3.0的学习TS解读高级类型
知识点摘要本节课主要关键词为: 自动类型推断 / 类型断言 / 类型别名(type) / 映射类型(Pick/Record等...) / 条件类型(extends) / 类型推断(infer) 自动 ...
vue3.0需要学习的技术栈
相关库名称在线地址
如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
vue3.0中props父子传值的改动
前言: 对vue3.0的学习以及对技术更新升级内容的整理与使用,这里分析下他的props父子传值的改动. vue官方入口目录一.vue2.0中props的用法 1.父组件中 a.vue中 2.子组 ...
vue3.0 php,使用Vue3.0收获的知识点（一）
前端发展百花放,一技未熟百技出. 茫然不知何下手,关注小编胜百书. 近期工作感觉很忙,都没有多少时间去写文章,今天这篇文章主要是将自己前期学习Vue3.0时候整理的一些笔记内容进行了汇总,通过对本文的 ...
vue3.0响应式源码实践,vue3.0初体验
vue3.0响应式源码实践,vue3.0初体验镇楼图--杀生丸.jpg vue-next(vue3.0预体验) 1. 使用: 2.vue-next的目录结构 3. reactive内部实现作者上篇 ...
SDU信息门户（10）前端vue3.0代码分析
2021SC@SDUSC 目录一.引言二.代码分析 1.答辩检查组件 2.文件系统组件 3.公告组件 4.教师发布题目组件三.总结一.引言 SDU信息门户中前端主要使用了Vue3.0的技术,这 ...

（六）Vue3.0预学习

Vue3.0预学习

Vue3要来了Vue2就要过时了吗

Vue3

Vue2.x马上就要过时了吗

Vue3升级内容

Proxy实现响应式

Object.defineProperty的缺点

Proxy实现响应式

Proxy基本使用

Reflect作用

Vue3用Proxy实现响应式

Proxy实现响应式

总结

（六）Vue3.0预学习相关推荐

最新文章

热门文章