如何搭建vue3项目及vue3带来的变化

改进

组件里可以有多个根节点
v-model 支持多属性
支持 将子树在其它地方渲染
可以自定义渲染函数，方便扩展到其它平台
增加了全局 API 的命名空间
将 props 变为可选
自定义指令增加 beforeUnmoun

变化

渲染函数变化
异步组件需要用 createAsyncComponent
统一普通插槽与作用域插槽
指令中支持动态参数

移除

inline-template
filters
事件绑定中的 keyCode
不再支持函数式组件，请转用纯渲染函数
移除 v-bind 中的 .sync 修饰符

2.0使用option

使用的是“options”API 构建组件。为了将逻辑添加到Vue组件中，填充（options）属性，如data、methods、computed等。
这种方法最大的缺点是，它本身不是一个工作的JavaScript代码。
您需要确切地知道模板中可以访问哪些属性以及this关键字的行为。在底层，Vue编译器需要将此属性转换为工作代码。

3.0使用composition 组合/注入API

Composition API希望将通过当前组件属性、可用的机制公开为JavaScript函数来解决这个问题。
Vue核心团队将组件Composition API描述为“一套附加的、基于函数的api，允许灵活地组合组件逻辑”。
使用Composition API编写的代码更易读，并且场景不复杂，这使得阅读和学习变得更容易。

vue3性能比2.x版本快1.2~2倍

如何变快的呢

• diff方法优化
  可以在线编译测试，看源代码，就能轻松理解
  vue2中的虚拟dom是进行全量的对比，vue3新增了静态标记（PatchFlag），在于上次虚拟节点进行对比的时候，只对比带有patch flag 的节点，并且可以通过flag的信息得知当前节点要对比的具体内容。
• hoistStatic静态提示
  vue2中无论元素是否参与更新，每次都会重新创建；
  vue3中对于不参与更新的元素，只会被创建一次，之后会在每次渲染的时候被不停的复用
• cacheHandlers事件侦听器缓存
  默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化，但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可
• ssr渲染
  当有大量静态的内容时候，这些内容会被当做字符串推进一个buffer里面，即使存在动态的绑定，会通过模板差值嵌入进去。这样会比通过虚拟dom来渲染的快上很多。
  当静态内容达到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。

如何快速搭建vue3项目

创建vue3的方式

• Vue-Cli
• Webpack
• Vite

下面主要介绍如何使用vite

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

2、安装Vite
npm install -g create-vite-app

3、利用Vite创建Vue3项目
create-vite-app projectName

4、安装依赖运行项目
cd projectName
npm install
npm run dev