vue3.0学习第一天(vue3.0的亮点)

1.vue3.0六大亮点

-Performance:性能比vue2.x快1.2~2倍
-Tree shaking support:按需编译，体积比vue20x更小
-compostion API:组合API
-Better TypeScript support:更好的Ts支持
-Custom Renderer API:暴露了自定义渲染的API
-Fragment,Teleport,Suspense:更先进的组件

2.vue3.0是如何变快的？

(1)diff方法优化:

+vue2.0中的虚拟dom是进行全量的对比
+vue3新增了静态标记
	在与上次虚拟节点进行对比时候，只对比带有patch flag的节点
	并且可以通过flag的信息得知当前节点要对比的具体内容

看图我们可以知道

diff算法优化网页地址

(2)hoisStatic 静态提升

+vue2中无论元素是否参与更新，每次都会重新创建
+vue3中对于不参与更新的元素，只会被创建一次，之后再每次渲染的时候被不停的重用

静态提升之前

静态提升之后

(3)cacheHandlers 事件侦听器缓存

+默认情况下onclick会被视为动态绑定，所以每次都会去追踪它的变化
但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可

(4)ssr渲染

+当有大量静态的内容时候，这些内容会被当做纯字符串推进有个buffer里面；
 即使存在动态的绑定，会通过模板插值嵌入进去，这样会比通过虚拟dom渲染来的快上很多很多
+当静态内容大到一定量级时候，会用_createStaticVNode方法在客户啊短去生成一个static node,
 这些静态node,会被直接innerHtml,就不需要创建对象，然后根据对象渲染

3.Vue3.0快速上手

（1）创建vue3的3种方式

+vue-cli
+webpack
+vite

（2）什么是Vite?

-Vite是vue作者开发的一款意图取代webpack的工具
-其实实现原理是利用ES6的import会发送请求去加载文件的特性
拦截这些请求，做一些预编译，省去webpack冗长的打包时间

（3）安装Vite

npm install -g create-vite-app

（4）利用Vite创建Vue3项目

create-vite-app projectName

（5）安装依赖运行项目

cd projectName
npm install
npm run dev

可以体验下Vite创建vue3.0以及运行的速度

2.Vue3.0兼容Vue2.x
3.Vue3.0-Custom Renderer API