VUE3.0入门
一、 VUE3.0介绍
Vue 团队于 2020 年 9 月 18 日发布了 正式版Vue 3.0 版本，命名为One Piece。
- vue3.0是兼容vue2.0，项目中vue2.x的语法和3.x的语法可以共存。
- 目前使用的element-ui是不支持vue3.0，elementPlus是针对vue3.0出得。(Ant Design、vant3.0)
- vue3.0官宣彻底放弃IE浏览器，vue2.7会成为坚持留守IE11人群的选择。
二、 VUE3.0的优势
- 更小
(1) 移除一些冷门的API。
如filter、按键修饰符（@keyup.13）等。
(2) 引入tree-shaking的技术，减少打包的体积。
tree-shaking是webpack 2 的新特性之一，指的是在打包构建过程中移除没有被引用到的代码。这个概念最早在基于 ES6 的打包工具 Rollup 中提出，后来被引入到 webpack 中。
在 Vue 3 中，官方团队重构了所有全局 API 的组织方式，让所有的 API 都支持了 tree-shaking。 使用tree-shaking的前提是所有的内容必须用ES6 modules的import，也就是说由webpack打包的代码必须使用ES module方式去实现模块化。
- 更快
2.1 编译优化
(1) diff算法优化
vue2中的虚拟dom是进行全量的对比。
vue3中新增了静态标记（PatchFlag）。在更新前的节点进行对比的时候，只会去对比带有静态标记的节点。并且可以通过flag的信息得知当前节点要对比的具体内容。
例如：有下面一段代码：
<div>
<p>我是段落</p>
<p> {{msg}} </p>
</div>
Vue 2.0 的全量对比模式下，如下图所示：
Vue2.0 中，虚拟dom是进行全量的对比，也就是说当数据变化，去重新渲染页面时，会重新再生成一个DOM树，生成的过程中会一一比较每个dom节点，但是像div和p的内容是写死的，并没有发生变化，还一一去做对比，所以这个操作就冗余了。
Vue3.0 中，对diff算法进行了优化，在创建虚拟DOM时，根据DOM内容是否会发生变化，添加相对应类型的静态标记，如下图所示：
在vue3.0 里，只对带有 flag 标记的标签进行了对比，所以只进行了 1 次比较，而相同情况下，Vue2 则进行了 3 次比较。这便是 Vue3.0 比 Vue2.0 性能好的第一个原因。
注：关于静态类型枚举如下：
(2) hoistStatus静态提升
Vue2.0 中无论元素是否参与更新,每次都会重新创建,然后再渲染。
Vue3.0 中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用，这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用。
我们可以打开模板转化网站，对上述代码进行转译：
注：模板转化代码的网址 https://vue-next-template-explorer.netlify.app/
没有做静态提升之前：
选择 Option 下的 hoistStatic：
做了静态提升后：
发现第一个p标签被提到了 render 函数外，保存到一个全局常量里，那么每次渲染的时候不会再重新创建，可以直接复用以前的。这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用。
(3) cacheHandlers事件监听缓存
默认情况下@click 事件被认为是动态变量，所以每次更新视图的时候都会追踪它的变化。但是正常情况下，我们的@click 事件在视图渲染前和渲染后，都是同一个事件，基本上不需要去追踪它的变化，所以Vue3.0对此作出了相应的优化叫事件监听缓存
例如：有下面一段代码：
<div>
<p @click="handleClick">测试</p>
</div>
未开启 cacheHandler：
选择 Option 下的 hoistStatic：
开启 cacheHandler：
开启 cacheHandler 之后，编译后的代码已经没有静态标记（PatchFlag），也就表明图中 P 标签不再被追踪比较变化，进而提升了 Vue 的性能。
(4) ssr渲染
SSR是 Server-Side Rendering(服务器端渲染)的缩写。
在开发中使用 SSR 开发时，Vue 3.0 会将静态标签直接转化为文本。
2.2 响应式优化
- 在vue2.x中是通过Object.defineProperty来实现响应式数据的。
Object.defineProperty存在的弊端：
- Object.defineProperty只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历，如果属性值也是对象，那么需要通过递归以及遍历data对象来实现对数据的监控。
- 在vue中，并不是任何时候数据都是双向绑定的。
- 在vue3.x中是通过Proxy来实现响应式数据的
Vue3使用Proxy能监听整个对象，这样可以从底层实现对这个对象进行完全的监控。
-
组合API
优化代码逻辑组织；优化逻辑复用 -
更好的ts支持
Vue3是基于typeScript编写的，提供了更好的类型检查，能支持复杂的类型推导
三、项目搭建
创建vue3项目的两种方式
- Vue-cli4脚手架搭建
① 安装node.js
node版本必须在10.0.0以上才支持
② 安装vue-cli脚手架构建工具
npm install -g @vue/cli
③ 创建项目
vue create 项目名称
注意：要求vue-cli脚手架版本在4.5以上，否则默认情况下vue3.0无法安装
2.vite
① 安装Vite：
npm install -g create-vite-app
② 使用 vite 创建 Vue3 项目：
create-vite-app项目名称
③ 运行项目：
npm install
npm run dev
注：Vite 是 Vue 作者开发的一款意图取代 webpack 的开发构建工具。
四、Composition API
composition API是Vue3的核心功能，其两大显著的优化：
优化逻辑组织
vue2 Options API：
在vue2中，我们会在一个vue文件中methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑，我们称这种方式为Options API。、
vue2.0存在的缺点：
每新增一个功能，就需要在data里定义变量，在methouds/computed/watch里面新增功能的业务逻辑。数据在data里面，业务逻辑在methouds/computed/watch里面，数据和业务逻辑分散，不利用代码的管理和维护。如果要修改一个逻辑点，就要上下来回翻找。
vue3为了解决这个问题，就推出了组合API。相同功能的代码编写在一块，而不像options API那样，各个功能的代码混成一块，组合API就是这样封装好的具备独立功能的函数组合在一起，就是我们的组合API。
优化逻辑复用
在vue2中，我们是通过mixin实现功能混合，如果多个mixin混合，会存在两个非常明显的问题：命名冲突和数据来源不清晰。
而通过composition这种形式，可以将一些复用的代码抽离出来作为一个函数，只要在使用的地方直接进行调用即可。
具体的API函数
- setup()函数
1、简介
setup函数是vue3中专门为组件提供的新属性，是组合API的入口函数。
2、执行时机
在beforeCreate()钩子函数之前执行。
3、返回值
返回一个对象，为模板提供数据，模板中可以直接使用此对象中的所有属性/方法。
注意：在setup()函数中无法访问到this
- reactive()函数
1、简介
reactive()函数是专门用来创建响应式数据,接受的参数是一个普通对象，但是返回的是一个响应式数据对象信息。
2、基本语法
// 按需导入reactive函数
import {reactive } from ‘vue
// 创建响应式数据对象
const state = reactive({
id: 1
})
- ref()函数
1、简介
ref函数用来根据给定的值创建一个响应式的数据对象。返回值也是一个对象，这个对象只包含一个value属性。
2、与reactive声明响应式数据的区别
ref函数传入的值是一个基本数据类型。
reactive函数传入的值是一个对象。
3、ref获取DOM
在setup里，先创建一个响应式数据，当响应式数据被赋值之后，就可以利用生命周期方法，在生命周期方法中获取对应的响应式数据，即DOM元素，并且要把响应式数据暴露出去。
- 生命周期钩子函数
beforeCreate 和 created 与 setup 几乎是同时进行的，所以可以把写在beforeCreate 和 created 这两周期的代码直接写在 setup 里即可。
命名都形如 onXXX。
beforeDestroy 和 destroyed 改为 onBeforeUnmount 和 onUnmounted ，更语义化了。