vue3.0

性能优化

diff算法优化: https://vue-next-template-explorer.netlify.app/

• Vue2中的虚拟dom是进行全量的对比
• Vue3新增了静态标记(PatchF1ag)，在与上次虚拟节点进行对比时候，只对比带有patch flag的节点并且可以通过flag的信息得知当前节点要对比的具体内容
  hoistStatic 静态提升
• Vue2中无论元素是否参与更新，每次都会重新创建，然后再渲染
• Vue3中对于不参与更新的元素，会做静态提升，只会被创建一 次，在渲染时直接复用即可
  cachellandlers 事件侦听器缓存+默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化但是因为是同一个函数，所以没有追踪变化，直接缓 存起来复用即可

响应数据底层api的优化

vue2

1. Object.defineProperty无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
2. Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。

vue3

3. Proxy可以劫持整个对象，并返回一个新的对象。Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。

ssr渲染

1. 当有大量静态的内容时候，这些内容会被当做纯字符串推进一个buffer里面，即使存在动态的绑定，会通过模板插值嵌入进去。这样会比通过虚拟dmo来渲染的快上很多很多。
2. 当静态内容大到一 定量级时候，会用_ createStat icVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象，然后根据对象渲染。

新增api

组合api setup

1. setup执行时机
   beforeCreate:表示组件刚刚被创建出来，组件的data和methods还没有初始化好
   setup
   Created:表示组件刚刚被创建出来，并且组件的data和methods已经初始化好
2. setup注意点
   -由于在执行setup函数的时候，还没有执行Created生命周期方法，所以在setup函数中，是无法使用data和methods．由于我们不能在setup函数中使用data和methods,所以Vue为了避免我们错误的使用，它直接将setup函 数中this修改成了undefined

reactive
reactive是Vue3中提供的实现响应式数据的方法，在Vue2中响应式数据是通过defineProperty来实现的，而在Vue3中响应式数据是通过ES6的Proxy来实现的

2. reactive注意点:
3. reactive参数必须是对象(json/arr)
   -如果给reactive传递了其它对象(number)，默认情况下修改对象，界面不会自动更新，如果想更新，可以通过重新赋值的方式

vue3中文文档