关于Vue3.0的一些观点与理解

1: 使用了 Vue3，是否都要遵循用 Composition API 的形式去写页面？
答案是否定的。需要注意一点：Vue3 并没有废弃 Options API,甚至还会全力支持兼容 Vue2 语法的工作。而 CompositionAPI 出现的背景主要是为了解决逻辑抽象和和复用的问题，但不意味着它成为了 Vue3 的标准。如何区分场景使用Options API or Composition API主要看业务逻辑的复杂程序，例如一些简单的 toast/button等基础组件，用options API形式会更加清晰和简洁。而相对复杂的业务逻辑，可以用Composition API，可以把单独一块逻辑抽离到一个模块。

2: Vue3 中混用 Options API 和 Composition API 会不会对性能产生影响?
不会。其实从问题 1 就可以明显地看出来并不会对性能产生任何影响。不应该被option api限制思维，而更多关注逻辑内聚问题

3: 关于 setup 中没有 this 的问题
官方是这样说的：在setup()内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以setup()内部的 this的行为与其它选项中的this 完全不同。这在和其它选项式 API 一起使用setup() 时可能会导致混淆

我们可以理解为：this未指向当前的组件实例，在setup被调用之前，data，methods，computed等都没有被解析，但是组件实例确实在执行setup函数之前就已经被创建好了

4: Vue3 响应式比 Vue2 的性能要好吗？
vue3 出来的时候，往往听到的一些答案都是说 Vue3 性能比 Vue2 性能好，但真的是吗？
首先从实现上来讲：我们都知道 vue2 中的响应式主要归功于Object.defineProperty, 它主要劫持对象的属性，所以它不能观测到对象属性的添加和删除，而在 vue 中，是用Proxy实现的，劫持的是整个对象，能规避掉 vue2 留下的问题，但也有明显的缺点就是兼容性不够强。但是对比 Vue2，你需要知道的是 vue3 性能上的优势主要还是体现在初始化阶段。因为 Vue2 中定位响应式对象时，会递归把子对象变成响应式。而 Vue3 其实是惰性执行：在对象属性被真正访问的时候才会递归执行子对象变成响应式。

5: Vue3与Vue2响应式的区别

• Vue2.x的响应式实现原理：
  1、对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）
  2、数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）

• vue2的缺点：（仅仅是关于数据响应造成的缺点哦！）
  1、影响初始化速度、数据过大时的资源问题(对象的每一个属性都要被拦截。所有的key都要有一次循环和递归)
  2、数组的特殊处理，导致其修改数据不能使用索引(原因在于defineProperty不支持数组）
  3、动态添加或删除对象属性无法被侦测

vue也都提供了解决方案：$set和$delete，需要理解的直接移步深入响应式原理。

• vue3.x的响应式实现原理:
  1、通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除
  2、Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

更多内容可以参考 ES6 Proxy

6: Vue3对比Vue2的优势及新特性原理

1. Vue3.x性能比Vue2.x快
   diff方法优化：
   vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会比较）
   vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息得知当前节点要对比的具体内容
   静态提升：
   vue2无论元素是否参与更新，每次都会重新创建然后再渲染
   vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可
   时间侦听器缓存：
   默认情况下onClick会被视为动态绑定，所以每次都会追踪它的变化
   但是因为是同一个函数，所以不用追踪变化，直接缓存起来复用即可
2. 按需编译，体积比vue2.x更小
3. 组合API（类似react hooks）
4. 更好的Ts支持
5. 暴露了自定义渲染API
6. 更先进的组件
7. template模板可以有多个根元素