Vue3的升级及优化总结

版本要求

node: 14.0版本以上
“vue-loader”: “^16.0.0”
“vue”: “^3.1.0”
“@vue/compat”: “^3.1.0”
“@vue/compiler-sfc”: “^3.1.0”

Vue2到Vue3的变化

1. Vue2是面对对象编程，Vue3是面向函数编程

2. 直接访问子组件的$children被遗弃，建议使用$refs。

3. Mixin行为改变：3.0为浅层合并

4. 生命周期钩子函数变更

2.0：beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed
3.0：setup, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted

5. 指令的生命周期

2.0: bind, inserted, update, componentUpdated, unbind
3.0: created, beforeMount, beforeUpdate, updated, beforeUnmount, unmounted

6. 双向绑定原理

2.0: 遍历data使用Object.defineProperties重新定义所有属性的get和set属性。在get时进行依赖收集，在set时进行发布更新。
3.0: 使用 new Proxy(instance.stx, publicInstanceProxyHandlers)返回一个代理对象，在handler里定义了代理对象了get, set, has和defineProperty

7. Vue3支持多个根节点

Vue2的template模板里只允许一个根节点，Vue3可以多个

8. diff算法

2.0 在对数组节点进行判断时，采用了新的头，新的尾，旧的头，旧的尾4个节点比较（）查找新节点对应旧节点的位置来进行移动删除等操作。
3.0 在生成虚拟DOM时会对节点进行标记，只对不是静态节点的节点进行diff操作，静态节点会在第一次渲染中放进缓存，后续直接从缓存中拿。且会根据节点的类型进行不同的操作。 3.0对数组节点时时进行2端比较，根据最长增长子序列来进行移动删除新增等操作，来最大程度的减少DOM的移动，达到最少的DOM操作。
当然key是不可缺少的优化diff的依据，2.0和3.0都是基于key和节点类型来判断新旧节点是否一致

9. SSR

2.0 next.js
3.0 nuxt.js
某些生命周期用不了：created

10. options api 和composition api

vue3的一大特点就是他的组合式api，在vue2的固定模板式option里，页面逻辑混乱不集中。所有全局工具函数属性等都挂载到组件实例上，通过this来调用
而composition api则是方便开发人员将相同业务逻辑聚集，提高可读性和维护性。采用声明式开发，所有全局属性需手动引入再使用，去掉了this。

Vue3新特性

11. Teleport
是一个内置组件，可以将一个组件内部的一部分模板“传送”到该组件所处的DOM结构外层的位置去，即可以通过指定容器，将该组件内部的内容渲染挂载到指定的容器下。
使用方式为：

	<Teleport to="body">
		//content
	<Teleport>
1
2
3

to的值可以是一个CSS选择器字符串，也可以是一个DOM元素对象。需要注意挂载的节点要比当前的节点先挂载到实例上
适用于model等想要解决层叠等级问题的组件
12. 响应式hook

reactive
ref

未完待续