带你认识vue3

1、Vue 3.0 性能提升主要是通过哪几方面体现的？

答：通过3方面体现

1. 响应式系统升级，采用Proxy实现
2. 编译优化，通过静态节点检查以及Patch标记等实现
3. 源码体积优化，通过tree-shaking,以及静态提升等实现

2、Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

答：有以下区别

• vue2.x逻辑代码组织分散，vue3逻辑代码组织集中更加方便管理和维护
• vue2.x逻辑代码难于重用，vue3逻辑代码易于重用
• vue2.x适用于简单的组件，vue3既适用于简单组件也适用于业务复杂的大型组件
• vue3的composition api对tree-shaking更友好，代码更加易于压缩
• vue3的composition api避免了对this的使用，彻底解决了this的指向问题　

3、Proxy 相对于 Object.defineProperty 有哪些优点？

答：相较Object.defineProperty, Proxy有这些优点

• Proxy可以直接监听对象而非属性
• Proxy可以劫持整个对象
• Proxy可以监听动态新增的属性
• Proxy可以监听删除的属性
• Proxy可以监听数组变化，特别地可以监听数组的索引和length属性
• Proxy有多达13种拦截方法，分别是：

4、Vue 3.0 在编译方面有哪些优化？

答：vue在编译方面有这些优化

• 支持多根节点,即Fragments（需要升级vetur插件，否则会有红色波浪线）
• 标记和提升所有的静态根节点
• Patch flag
• 缓存事件处理函数

5、Vue.js 3.0 响应式系统的实现原理？

• Vue3内部采用ES6的Proxy代理对象来实现响应式系统
• Proxy用于实现属性嗅探，在初始化过程中不必遍历所有属性来定义它们的属性。
• 多属性嵌套，在访问属性的过程中处理下一级属性(递归处理)
• 默认情况下会监视动态添加的属性。
• 默认侦听属性的删除操作
• 默认情况下，它侦听数组索引和长度属性的修改。
• 它可以作为一个单独的模块使用。

核心方法：

• reactive/ref/toRefs/computed
• effect(在watch函数中使用的底层函数。)
• track(用于收集依赖函数)
• trigger(用于触发更新)