## Vue2 与 Vue3 的区别
`Vue3`由于完全由`TS`进行重写,在应用中对类型判断的定义和使用有很强的表现。同一对象的多个键返回值必须通过定义对应的接口(`interface`)来进行类型定义。要不然在 ESLint 时都会报错。
`vue2` 的双向数据绑定是利用 `ES5` 的一个 `API Object.definePropert()`对数据进行劫持 结合 `发布订阅`模式的方式来实现的。`Vue3` 中使用了 `es6` 的 `ProxyAPI` 对数据代理。
`Vue3`支持碎片(`Fragments`)
Vue2 与 Vue3 最大的区别: Vue2 使用`Options API`而 Vue3 使用的`Composition API`
Composition API 中,所有的逻辑可以集中在一个名为 setup() 的函数内定义,并根据功能进行分组和模块化。
## 声明响应式状态的方式
ref()
reactive()
shallowRef()
shallowReactive()
## 生命周期钩子变化
```js
Vue2 ~~~~~~~~~~~ vue3
beforeCreate -> setup()
created -> setup() // 实例没有创建,不能访问上下文
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
```
{{ message }}
## 性能提升
```
vue3 => {
编译阶段
源码体积
响应式系统
}
• diff 算法优化
• 静态提升
• 事件监听缓存
• SSR 优化
```
静态文本
静态文本
{{ message }}
静态文本
...
静态文本
### 1.diff 算法
```
vue3 在 diff 算法中相比 vue2 增加了静态标记
关于这个静态标记,其作用是为了会发生变化的地方添加一个 flag 标记,下次发
生变化的时候直接找该地方进行比较
```
### 2.静态提升
```
Vue3 中对不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复
用
这样就免去了重复的创建节点,大型应用会受益于这个改动,免去了重复的创建操
作,优化了运行时候的内存占用
```
你好
{{ message }}
### 3.事件监听缓存
```
未开启事件监听器缓存:
```
```
onClick属性直接绑定到组件实例的_ctx.onClick方法。每次渲染时,都会创建一个新的事件处理器引用。
开启事件监听器缓存:
```
```
在开启了事件监听器缓存的情况下,Vue.js会尝试复用已创建的事件处理器以提高性能。这里使用了闭包来缓存事件处理函数,_cache[1] 是一个闭包缓存变量,如果之前已经为 onClick 创建过处理函数,则从缓存 _cache 中获取,否则新建一个处理函数并赋值给 _cache[1]。这样,在后续的渲染过程中,如果_ctx.onClick方法没有变化,就会复用同一个事件处理器,从而避免不必要的内存分配和DOM操作。
总结来说,开启事件监听器缓存是为了优化性能,减少无谓的DOM更新以及内存消耗。
```
### 4.SSR 优化
```
当静态内容大到一定量级时候,会用 createStaticVNode 方法在客户端去生成一
个 static node,这些静态 node,会被直接 innerHtml,就不需要创建对象,然后根
据对象渲染
```
你好
... // 很多个静态属性
{{ message }}
### 源码体积
```
相比 Vue2,Vue3 整体体积变小了,除了移出一些不常用的 API,再重要的是 Tree
shanking
任何一个函数,如 ref、reavtived、computed 等,仅仅在用到的时候才打包,没
用到的模块都被摇掉,打包的整体体积变小
```
```
Tree shanking的作用
1、减少程序体积(更小)
2、减少程序执行时间(更快)
3、便于将来对程序架构进行优化(更友好)
```
### 响应式系统
```
```
## 状态管理 pinia
> 由于 vuex 4 对 typescript 的支持度较低,所以状态管理弃用了 vuex 而采取了 pinia. pinia 的作者是 Vue 核心团队成员
尤大好像说 `pinia` 可能会代替 `vuex`,所以请放心使用。
### 安装 pinia
Pinia 与 Vuex 的区别:
- `id` 是必要的,它将所使用 store 连接到 devtools。
- 创建方式:`new Vuex.Store(...)`(vuex3),`createStore(...)`(vuex4)。
- 对比于 vuex3 ,state 现在是一个`函数返回对象`。
- 没有 `mutations`,不用担心,state 的变化依然记录在 devtools 中。
```bash
# 安装
yarn add pinia@next
```
main.ts 中增加
```js
# 引入
import { createPinia } from "pinia"
# 创建根存储库并将其传递给应用程序
app.use(createPinia())
```
在 `src` 文件夹下新增 `store` 文件夹,接在在 store 中新增 `main.ts`
### 创建 `store`, main.ts :
```js
import { defineStore } from 'pinia'
export const useMainStore = defineStore({
id: 'main',
state: () => ({
name: '超级管理员',
}),
})
```
组建中获取 store :
```js
{{mainStore.name}}
```
### getters 用法介绍
> Pinia 中的 getter 与 Vuex 中的 getter 、组件中的计算属性具有相同的功能
`store` => `main.ts`
```js
import { defineStore } from 'pinia'
export const useMainStore = defineStore({
id: 'main',
state: () => ({
name: '超级管理员',
}),
// getters
getters: {
nameLength: (state) => state.name.length,
},
})
```
组件中使用:
```js
用户名:{{ mainStore.name }}
长度:{{ mainStore.nameLength }}
/* $patch 方法在 Vue.js 或者与 Vue 生态相关的状态管理库(如 Vuex 或 Pinia)中常用于局部更新或合并现有状态。这个方法允许你以部分更新的方式修改 store 中的状态,而无需替换整个状态对象。
在 Pinia(Vue3 的状态管理库)中,store.$patch 方法用来直接对 store 状态进行部分更新,例如: */
```

### actions
> 这里与 `Vuex` 有极大的不同,`Pinia` 仅提供了一种方法来定义如何更改状态的规则,放弃 `mutations` 只依靠 `Actions`,这是一项重大的改变。
`Pinia` 让 `Actions` 更加的灵活:
- 可以通过组件或其他 `action` 调用
- 可以从其他 `store` 的 `action` 中调用
- 直接在 `store` 实例上调用
- 支持`同步`或`异步`
- 有任意数量的参数
- 可以包含有关如何更改状态的逻辑(也就是 vuex 的 mutations 的作用)
- 可以 `$patch` 方法直接更改状态属性
```ts
import { defineStore } from 'pinia'
export const useMainStore = defineStore({
id: 'main',
state: () => ({
name: '超级管理员',
}),
getters: {
nameLength: (state) => state.name.length,
},
actions: {
async insertPost(data: string) {
// 可以做异步
// await doAjaxRequest(data);
this.name = data
},
},
})
```
## composition API 与 options API
```
在 Vue2 中,我们用过 mixin 去复用相同的逻辑
```
然后在组件中使用
```
Mouse position: x {{ x }} / y {{ y }}
```
使用单个 mixin 似乎问题不大,但是当我们一个组件混入大量不同的 mixins 的时
候
mixins: [mousePositionMixin, fooMixin, barMixin, otherMixin]
会存在两个非常明显的问题:
• 命名冲突
• 数据来源不清晰
现在通过 Compositon API 这种方式改写上面的代码
```
```
```
Mouse position: x {{ x }} / y {{ y }}
```