Open py-tofee opened 1 year ago
A、生命周期不同 vue3中不包含beforeCreate 和 created，setup函数本身就是围绕这两个生命周期的，所以不需要显示定义了； 其他几个生命周期作用差不多，beforeDestroy 和destroyed 两个相关生命周期 在vue3中对应 onBeforeUnmount 和 onUnmounted；在Vue2中，可以在选项式api中直接使用生命周期钩子函数，vue3中，需要先引入，才能在setup中使用，且在setup中，同一个生命周期钩子，不同功能可以拆分成多个生命周期钩子函数，例如可以写两个onMounted(() => {})分别处理不同的逻辑；所以我们可以抽离不同的功能模块为一系列hooks，直接引入使用，便于功能拆分，复用；
B、fragment 多根节点 vue3 一个组件支持多根节点，vue2只支持单根，多根会报错;
C、API vue2是选项式API，一个功能模块的变量、函数、监听等会散落在文件的各个地方，可读性差； Vue3是组合式API，可以将同一逻辑功能写在一起，可读性强且可复用可维护性强；
D、vue3新增内置组件 Suspense，异步组件，包裹的子组件未加载完之前，渲染fallback插件中的内容，可以自定义loading 或者骨架屏之类的效果； Teleport，可以指定插槽中的内容渲染位置；
E、响应式原理 Vue2 响应式原理基础是 Object.defineProperty；Vue3 响应式原理基础是 Proxy。 Object.defineProperty存在一些局限性，他是把对象转换成getter和setter的方式，在getter中执行依赖收集，在setter中监听变量的修改，并触发视图更新；对于数组，他处理了数组的push、pop、shift等可改变数组的原型方法；但是无法监听对象或数组新增、删除的元素；不过也有对应的解决方案，使用vue.set将新增的属性变成响应式数据； Proxy是es6的新特性，他能代理目标对象的所有操作，依赖Reflect，拦截对象原型上的方法，处理响应式相关逻辑后，再执行原生原型上的方法实现其功能；
F、虚拟DOM和diff算法 vue3在虚拟DOM节点中新增patchFlag字段，标记vnode节点类型，判断是静态文本，动态文本、动态属性、是否带有事件监听，是否包含插槽等，在diff的时候，减少对比内容，提升效率，并且对所有的静态文本节点做一个变量提升，在下次重新渲染时，可以直接引用无需重新创建；
G、事件缓存 vue3在首次渲染后缓存组件事件，类似静态文本节点一样，做变量提升，下次使用直接引用，无需再创建一个新的函数； vue2每次渲染都会创建一个新的函数传给vnode；
F、打包优化 Vue3中 对vue的引用是按需引用的，比如需要使用nexttick，才会引用 import { nextTick } from ‘’vue；vue2是直接全量引入整个vue; vue3的方式更利于tree-shaking：检测代码模块，没被使用的包将会被移除；
G、vue3更好的typescript支持
vue2 与 vue3 对比
A、生命周期不同 vue3中不包含beforeCreate 和 created，setup函数本身就是围绕这两个生命周期的，所以不需要显示定义了； 其他几个生命周期作用差不多，beforeDestroy 和destroyed 两个相关生命周期 在vue3中对应 onBeforeUnmount 和 onUnmounted；在Vue2中，可以在选项式api中直接使用生命周期钩子函数，vue3中，需要先引入，才能在setup中使用，且在setup中，同一个生命周期钩子，不同功能可以拆分成多个生命周期钩子函数，例如可以写两个onMounted(() => {})分别处理不同的逻辑；所以我们可以抽离不同的功能模块为一系列hooks，直接引入使用，便于功能拆分，复用；
B、fragment 多根节点 vue3 一个组件支持多根节点，vue2只支持单根，多根会报错;
C、API vue2是选项式API，一个功能模块的变量、函数、监听等会散落在文件的各个地方，可读性差； Vue3是组合式API，可以将同一逻辑功能写在一起，可读性强且可复用可维护性强；
D、vue3新增内置组件 Suspense，异步组件，包裹的子组件未加载完之前，渲染fallback插件中的内容，可以自定义loading 或者骨架屏之类的效果； Teleport，可以指定插槽中的内容渲染位置；
E、响应式原理 Vue2 响应式原理基础是 Object.defineProperty；Vue3 响应式原理基础是 Proxy。 Object.defineProperty存在一些局限性，他是把对象转换成getter和setter的方式，在getter中执行依赖收集，在setter中监听变量的修改，并触发视图更新；对于数组，他处理了数组的push、pop、shift等可改变数组的原型方法；但是无法监听对象或数组新增、删除的元素；不过也有对应的解决方案，使用vue.set将新增的属性变成响应式数据； Proxy是es6的新特性，他能代理目标对象的所有操作，依赖Reflect，拦截对象原型上的方法，处理响应式相关逻辑后，再执行原生原型上的方法实现其功能；
F、虚拟DOM和diff算法 vue3在虚拟DOM节点中新增patchFlag字段，标记vnode节点类型，判断是静态文本，动态文本、动态属性、是否带有事件监听，是否包含插槽等，在diff的时候，减少对比内容，提升效率，并且对所有的静态文本节点做一个变量提升，在下次重新渲染时，可以直接引用无需重新创建；
G、事件缓存 vue3在首次渲染后缓存组件事件，类似静态文本节点一样，做变量提升，下次使用直接引用，无需再创建一个新的函数； vue2每次渲染都会创建一个新的函数传给vnode；
F、打包优化 Vue3中 对vue的引用是按需引用的，比如需要使用nexttick，才会引用 import { nextTick } from ‘’vue；vue2是直接全量引入整个vue; vue3的方式更利于tree-shaking：检测代码模块，没被使用的包将会被移除；
G、vue3更好的typescript支持