LastPoem
commented
3 years ago Vue2.X存在的问题： 数据和业务逻辑分散（分散在data, computed, methods)，不便于管理和维护.
解决：在vue3中提供组合API
在组件中提供setup函数，组合API的入口函数。 如:
import {ref} from 'vue'; // ref只能监听简单类型数据变化，不能监听数组对象等复杂数据的变化 import {reactive} from 'vue'; export default {
setup() { // 定义了一个名叫count的变量，变量初始值为0 // 变量发生改变之后，Vue会自动更新UI let cout = ref(0); function myFn() { console.log(count.value); }
let state = reactive({
stu: [
{}, {}, {}
]
})
// 注意：组合API中定义的变量/方法， 要想在外界使用，必须使用return { xxx, xxx }暴露出去
return {count, myFn, state}}
Vue3的特性：
Vue3.0性能优化：
1.优化diff算法。 Vue2每次更新会对页面虚拟DOM进行全量对比，而Vue3只对比带有patch flag的节点，且可通过flag信息得知要对比的具体内容。 在创建虚拟DOM时会根据DOM中内容是否会发生变化来添加静态标记，DOM中内容会发生变化就会添加标记。 标记Flag是个枚举： 值为1表示动态文本节点 值为2表示动态class 值为4表示动态style 值为8表示动态属性，但不包含类名和样式 值为16表示具有动态key属性，当key改变时，需要进行完整的diff比较 值为32表示带有监听事件的节点 值为64表示一个不会改变子节点顺序的fragment 值为128表示带有key属性的fragment或部分子节点有key 值为256表示子节点没有key的fragment 值为512表示一个节点只会进行非props比较
2.hoistStatic 静态提升 Vue2中无论元素是否参与更新，每次都会重新创建，然后再渲染。 Vue3中对于不参与更新的元素，会做静态提升（将不会更新的元素提升到全局静态变量），只会被创建一次，在渲染时直接复用。
3.cacheHandlers 事件侦听器缓存 默认情况下onClick被视为动态绑定，所以每次都会追踪它的变化 但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可。 这种事件初次渲染会给出8这个patch flag，下一次静态标记就会消失。因此不会再进行比较和追踪。
4.ssr渲染 当有大量静态内容时，这些内容会被当做纯字符串推进一个buffer里面。 即使存在动态绑定，会通过模板插值嵌入进去，这样会比通过虚拟DOM渲染快很多。 当静态内容大到一定量级时，会用_createStaticVNode 方法在客户端生成一个static node，这些静态node，会被直接innerHTML，就不需要创建对象，然后根据对象渲染。