共计 3378 个字符，预计需要花费 9 分钟才能阅读完成。
# 概述
- 谈一谈你对 Vue.js 的响应式数据的了解
- Vue3 呈现解决了什么问题？它有哪些劣势？
- Vue3 新个性有哪些
- vue2 和 vue3 的响应式有什么区别？
谈一谈你对 Vue.js 的响应式数据的了解
Vue 2.x
对象类型 ：通过 object.defineProperty() 对属性的读取、批改进行拦挡（数据劫持)
数组类型 ：通过 重写更新数组的一系列办法 来实现拦挡(对数组的变更办法进行了包裹
Object.defineProperty【https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refer…】
-
当你把一个一般的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并应用 Object.defineProperty 把这些 property 全副转为 getter/setter。
- Object.defineProperty 是 ES5 中一个无奈 shim 的个性，这也就是 Vue 不反对 IE8 以及 更低版本浏览器的起因。
-
当应用这些数据属性时，会进行依赖收集（收集到以后组件的 watcher）
- 每个组件都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据记录为依赖之后当依赖项的 setter 触发时，会告诉 watcher，从而使它关联的组件从新渲染
存在问题：
- 新增属性、删除属性，界面不会更新
- 间接通过下标批改数组，界面不会自动更新
更多精彩内容，请 微信搜寻“前端爱好者 “， 戳我 查看。
Vue 3.x
通过 Proxy（代理）：拦挡对象中任意属性的变动，包含：属性值的读写，属性的减少，属性的删除等。
通过 Reffect（反射）：对源对象的属性进行操作
Proxy 是 ECMAScript 6 中新增的属性。【https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refer…】
MDN 文档中形容的 Proxy 与 Reflect
proxy
Proxy 对象用于创立一个对象的代理，从而实现基本操作的拦挡和自定义（如属性查找、赋值、枚举、函数调用等）。
被 Proxy 代理虚拟化的对象。它常被作为代理的存储后端。依据指标验证对于对象不可扩展性或不可配置属性的不变量（放弃不变的语义）。
语法
const p = new Proxy(target, handler)参数：
target：
要应用 Proxy 包装的指标对象（能够是任何类型的对象，包含原生数组，函数，甚至另一个代理）。
handler：
一个通常以函数作为属性的对象，各属性中的函数别离定义了在执行各种操作时代理 p 的行为。
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)
}
})Reffect
Reflect 是一个内置的对象，它提供拦挡 JavaScript 操作的办法。Reflect 不是一个函数对象，因而它是不可结构的。
在 reffect 身上，就有 defineProperty() 这个办法
在 Vue3 数据的更新是 proxy 配合 Reffect 来实现的。
Proxy 与 Object.defineProperty 优劣比照
Proxy 的劣势如下:
- Proxy 能够间接监听对象而非属性；
- Proxy 能够间接监听数组的变动；
- Proxy 有多达 13 种拦挡办法, 不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
- Proxy 返回的是一个新对象, 咱们能够只操作新的对象达到目标, 而 Object.defineProperty 只能遍历对象属性间接批改；
- Proxy 作为新规范将受到浏览器厂商重点继续的性能优化，也就是传说中的新规范的性能红利；
Object.defineProperty 的劣势如下:
- 兼容性好，反对 IE9，而 Proxy 的存在浏览器兼容性问题, 而且无奈用 polyfill 磨平，因而 Vue3.0 才用 Proxy 重写。
总结
- 在 Vue2 中，数据响应式次要借助 Object.defineProperty() 来实现，存在的缺点是无奈操作数据的减少和删除，
- 在 Vue3 中，数据响应式次要借助 proxy 和Reffect配合实现，能够做到实现数据的增删改查。
Vue3 呈现解决了什么问题？它有哪些劣势？
Vue2 代码模式下存在的几个问题：
- 随着性能减少，简单的组件代码越来越多，变得难以保护。次要起因是 vue2 通过选项式 API 组织的代码，一个逻辑性能可能有多处代码，不易他人上手。
- 短少一个比拟洁净的在多个组件之间能够提取和复用逻辑的机制。
- 类型推断不敌对。
- 没有动态类型查看，只有代码运行之后能力发现错误等等。
Vue3 是在 Vue2 的根底上进行了一些优化，对 typeScript 有了更好的反对。
Vue3 和 Vue2 是能够共存的，Vue3 可能向下兼容反对选项式 API，同时又新增了一些个性，大大晋升了性能。
Vue3 的劣势：
- 性能更好
- 体积更小
- 更好地 ts 反对
- 更好的代码组织
- 更好的逻辑抽离
- 更多新的性能
Vue3 新个性有哪些
性能晋升
响应式性能晋升，由原来的 Object.defineProperty 改为基于 ES6 的 Proxy，使其速度更快，打消正告。
重写了 Vdom，冲破了 Vdom 的性能瓶颈。
进行模板编译优化。
更加高效的组件初始化。
更好的反对 typeScript
有更好的类型推断，使得 Vue3 把 typeScript 反对得十分好。
新增 Composition API
Composition API 是 vue3 新增的性能，比 mixin 更弱小。它能够把各个功能模块独立开来，进步代码逻辑的可复用性，同时代码压缩性更强。
新增组件
- Fragment 不再限度 template 只有一个根几点。
- Teleport 传送门，容许咱们将管制的内容传送到任意的 DOM 中。
- Supense 期待异步组件时渲染一些额定的内容，让利用有更好的用户体验。
Tree-shaking：反对摇树优化
摇树优化后会将不须要的模块修剪掉，真正须要的模块打到包内。优化后的我的项目体积只有原来的一半，加载速度更快。
Custom Renderer API：自定义渲染器
实现 DOM 的形式进行 WebGL 编程。
vue2 和 vue3 的响应式有什么区别？
vue2 的响应式原理：
对象：是通过 Object.defineProperty 对 对象的已有属性值的读取和批改进行劫持。
Object.defineProperty('data', 'count', { get(){}, set(){}})存在的问题：对象间接增加新属性或删除已有属性的时候，界面不会自动更新。
数组：是通过重写数组更新数组一系列更新元素的办法，来实现元素批改的劫持。
// 伪代码 const originalProto = Array.prototypeconst arrayProto = Object.create(originalProto)
['push','pop','shift','unshift','splice','reverse','sort'].forEach(key=>{arrayProto[key] = function(){originalProto[key].apply(this.arguments)
notifyUpdate()}
})存在问题：间接通过下标替换元素或更新 length 的时候，界面不会自动更新。
针对 vue2 对象和数组的某些更新，界面不能自动更新的问题，vue2 通过 $set 办法，实现视图的实时更新。
vue3 的响应式原理：
vue3 响应式是应用 ES6 的 proxy 和 Reflect 相互配合实现数据响应式，解决了 vue2 中视图不能自动更新的问题。
proxy 是深度监听，所以能够监听对象和数组内的任意元素，从而能够实现视图实时更新。
参考地址：
- https://tangjiusheng.com/web/4935.html