【九月打卡】第6天 深入了解vue3特性&学习vue3的重要性

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：初识 Vue3.0： 新特性详解

课程讲师：张轩

课程内容：

本章节目前只学习了前九小节，但已经收益不少，老师课程讲的很详细，给我们阐述了vue3.0的新特性，以及目前我们在vue2开发过程中所遇到的问题和局限性，帮助我理解对vue3的推出和学习的必要性，还有可能给我们开发带来的便利和益处，是相当好的一节课程。

课程收获：

前期也学习了vue3的新特性，而这次课程我更受益的是更深一层次的了解了之前没有太关注到的一些点。

一、vue3之性能提升（重写虚拟dom的实现和tree shaking的优化益处体现）

1、打包大小减少约41%
2、初次渲染快55%，更新快133%
3、内存减少54%

二、vue3的两个特别的特性组件

• teleport瞬移组件的位置，
  通常使用于全局的弹窗，提示框等，此类组件是覆盖到全部的dom之上的，如果放置在我们的APP容器中可能导致层级过深，样式影响，而且在dom结构上也不太合理，vue3提供的这个组件能够将提示框组件瞬移至外部，方便的放到我们想要放置的地方，这也是它的好处有点。
• suspense异步加载组件的福音
  在页面渲染的时候我们常常会因为数据请求的延迟出现页面的空白期，从而影响用户的体验，这时候我们就需要在页面数据请求回来之前先渲染预先写好的提示页面，或者加载中的状态，待数据返回时自动替换成我们真正想要用户看到的页面，这时候只要使用suspense组件包裹我们的页面就能够轻松实现。

三、 vue2中mixin的缺点（composition API被推出的必然性）

1、命名冲突：当在一个组件中引入多个mixin时容易导致命名冲突
2、不清楚暴露出来变量的作用，逻辑不清晰代码难维护
3、重用到其他组件会遇到很多问题，比如方法等被覆盖，变量被重写而不自知。

四、 vue2的defineproperty与vue3的proxy的区别：

defineproperty是通过对data的某一具体的属性对对象进行监听的，即是需要预先知道某一key值，再对这个key设置get，set方法。所以他不能监听对象新增的属性，也不能监听数组的变动，要通过拦截数组原型上的方法进行修改，所以提供了$set方法。
proxy是对整个data对象进行拦截，能读取和修改data上任意的key，不关心具体的key，相当于在监听之前设置了一个拦截器，能捕捉到任何新增的key进行监听。另外proxy的强大之处是除了get，set他还能拦截更多的操作符

五、两个特殊的生命周期钩子，数据更新时会调用，展示的是更新的属性的相关信息，主要用于调试观察使用

onrendertracked（event）｛｝
onrendertriggered（event）｛｝