[JavaScript知识库]Vue3入门——Vue3的优点以及Vue3项目创建（一）

一、Vue3六大亮点

1.性能比Vue3快1.2~2倍；

2.Vue3 按需编译，体积比Vue2更小

3.支持组合API，类似React Hooks

4.更好的支持TS

5.暴露了自定义渲染的API

6.提供了更先进的组件

二、如何提速

1.Vue3对diff算法进行了优化：

? ? Vue2中的虚拟dom是进行全量对比，Vue3新增了静态标记。在与上次虚拟节点进行比较的时候，只对比带有静态标记的节点，并且可以通过标记的信息得知当前节点对比的具体内容。

2.静态提升：

? ? ?Vue2中，无论元素是否参与更新，每次都会重新创建，Vue3中对于不参与更新的元素，会做静态提升，只创建一次，之后会在每次被渲染时不停复用，创建次数少了，性能就提升了。

3.事件侦听器缓存

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

4.ssr渲染

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

三、vue3快速上手

创建方式有三种：Vue-CLI、Webpack、Webpack、Vite。前三种不做说明。

Vite介绍：Vite是Vue作者为vue3定制开发的工具，由意图取代Webpack。其实现原理是利用ES6的import会发送请求，去加载文件的特性，拦截这些请求，做一些预编译，省去了webpack冗长的打包时间。

1.安装Vite：

? ? ? ?npm install -g create-vite-app

2.创建vue3项目：

? ? ? ? create-Vite-app projectName

3.安装依赖运行项目

? ? ? ? cd?projectName

? ? ? ? npm install

??