vue-vue2和vue3的区别
核心区别
- 用Composition API代理Options API
- 体积更小
- 数据响应式的区别
- diff算法优化
- 静态提升
- 事件监听缓存
- SSR优化
- 部分新特性
1、用Composition API代理Options API
2、体积更小
- vue2导入的是整个vuejs，而vue3可以按需导入
- 通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的能够tree-shaking；
3、数据响应式的区别
- Vue2是通过 Object.defineProperty来完成响应式处理，遍历对象所有的property，并将其转化getter/setter，由于是递归实现监听，如果数据层级较多，会导致初始化时间过长，而且原生不支持监听数组，对象中新增的key无法获取相应性，通过数组下标改变数据时，也无法触发响应式，可通过 $set重新绑定，恢复响应性
- Vue3分为（1）值类型响应式比较简单，直接对该对象设置set和get的方法（ref），获取value；（2）复杂类型响应式是通过使用Proxy和Reflect来完成的响应式处理，也是出来set和get；优点：速度快，只有get数据是才会添加响应式，不用初始化时深层次递归，可以检测到代理对象属性的动态添加和删除，可以检测到数组的下标和length属性的改变，且Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等，这是Object.defineProperty不具备的
4、diff算法优化
- vue2比较的过程是全量的比较，也就是每个节点都会彼此比较。有些节点中的内容是不会发生改变的，那我们对其进行比较就肯定消耗了时间。
- 在Vue3.0当中，就对这部分内容进行了优化：在创建虚拟DOM树的时候，会根据DOM中的内容会不会发生变化，添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候，就只会对比这些带有静态标记的节点。
5、静态提升
- Vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用，这样就可以免去了重复的创建节点
6、事件监听缓存
- 默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化，但是因为是同一个函数，所以没必要去追踪它的变化，想办法将它直接缓存起来复用就会提升性能。因此要打开事件监听缓存，这样静态标记就不存在了，这部分内容也就不会进行比较了。
7、SSR优化
- 当静态内容达到一定量级的时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会直接innerHtml，就不需要创建对象，然后根据对象渲染
8、部分新特性
- framents：在 Vue3.x 中，组件现在支持有多个根节点
- Teleport：Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”
- createRenderer：vue3通过createRenderer，我们能够构建自定义渲染器，我们能够将 vue 的开发模型扩展到其他平台
