4月19学习内容

一、vue2和Vue3的区别

• 1、性能：在Vue3中，使用了Proxy代理对象取代了Object.defineProperty()方法，从而大大提高了响应式数据的性能。此外，Vue3还通过改善虚拟DOM算法和优化渲染流程来进一步提升性能。
• 2、组件API：在Vue3中，组件API有所改变，例如组件中的data属性改为了setup方法，在setup方法中可以直接使用响应式数据、生命周期钩子函数和计算属性等。
• 3、Composition API：Vue3中引入了Composition API，提供了一种更加灵活和可重用的组件逻辑复用方式，能大大减少代码耦合度。
• 4、插槽：Vue3中的插槽语法也发生了改变，具体表现为默认插槽使用单个“v-slot”，命名插槽使用“v-slot:slotName”等。
• 5、Tree-shaking：Vue3中使用了ES Modules来构建，实现了Tree-shaking，有效减少了应用程序的体积。
• 6、其他：Vue3还引入了Teleport（客运站）和Suspense（停顿）等新特性，提供了更好的性能和用户体验。

二、Tree shaking 的本质 - 消除无用的JavaScript代码

https://juejin.cn/post/7030727223602905119

因为 ES6 Model 的出现，ES6 Model 依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析。

• ES6 Module引入进行静态分析，故而编译的时候正确判断到底加载了那些模块
• 静态分析程序流，判断那些模块和变量未被使用或者引用，进而删除对应代码

三、Teleport（客运站）

https://juejin.cn/post/7053807724760399885

Vue3.0 新增了一个Teleport组件，开发者可以使用它将其所在组件模板的部分内容移动到特定的DOM位置，譬如body或者其他任意位置。

Vue 2.0要实现对应的功能则需要使用portal-vue三方库，或者使用$el操作DOM等来实现。

四、Suspense（停顿）

https://juejin.cn/post/6854573214547312654

Suspense 是 vue3 中新增的组件，类似于 keep-alive 不需要任何的引入，可以直接进行使用。自带两个 slot 分别为 default、fallback。顾名思义，当要加载的组件不满足状态时,Suspense 将回退到 fallback状态一直到加载的组件满足条件，才会进行渲染。