--- theme: cyanosis --- ## 前言不知不觉中，使用 `Vue3` 开发挺长一段时间了，经历过大大小小的项目，其中项目形式主要涉及两种，要么是 `Vue3+Webpack` 要么就是 `Vue3+Vite`，而对于 `TS` 并不会每个项目都会使用，像比较小且急的项目就不会考虑使用 `TS` ，感觉没啥必要，增加 `TS` 只会徒增编译时间、开发难度、开发成本等等。呃...总的来说，还是要看实际的场景考虑吧。然后对于为什么会有两种项目形式的选择，也就是 `Webpack` 与 `Vite` 的比拼，这其中考虑的因素有很多，但最重要的一个衡量点小编觉得还是在于项目的规模，对于项目规模太大的项目，小编还是不太敢上 `Vue3+Vite` 形式，怕其中带来的后果承担不起>_<。 - `Vite` 可用插件还不是很多。 - `Vite` 开发环境与生产环境打包器不同，线上出现bug不容易定位问题。 - 可能你会想，用上Vue3不用Vite不是白用了？直接用vue2不就行了？Vue3的优点有很多，可不止 `Vite`，像代码体积更小，底层性能更佳等等。 ## Vue3优点 **1.源码体积小**：`Vue2` 压缩后的体积大约有20kb，`Vue3` 压缩后的体积只有10kb。`Vue3` 中移除了部分API，如 `filter`、`$on`、`$off`、`$once`、`$destory`、按键修饰符全部改用按键名，不再支持按键值。 **2.响应式系统升级**：将原来的 `Object.defineProperty` 替换成了ES6中的 `Proxy` ，它是通过在目标对象前加了一层拦截，代理的是对象而不是对象的属性，比原来的颗粒度变大了。现在可以监听到对象的新增与删除属性的操作、数组的索引赋值操作、数组的 `length` 属性操作。 **3.更友好的静态类型支持**：`Vue2` 需要额外采用 [Flow](https://flow.org/en/docs/getting-started/) 作为静态类型检查，它是由 Facebook 出品的 `JavaScript` 静态类型检查工具；而 `Vue3` 直接全部采用 `TS` 进行开发，对 `TS` 支持更友好。 **4.性能提升**：`Vue3` 重写了虚拟 `DOM` 和底层的 `Diff` 算法，拥有更好的 `tree-shaking` 支持，整体性能得很大的一个提升。 **5.CompositionAPI**：`Vue3` 最大的一个变动应该就是推出了 `CompositionAPI`，可以说它受`ReactHook` 启发而来；它我们编写逻辑更灵活，便于提取公共逻辑，代码的复用率得到了提高，也不用再使用 `mixin` 担心命名冲突的问题。 **6.更先进的组件**：`Teleport` - 传送/瞬移组件、`Suspense` - 等待异步组件过程中可以先提前渲染占位内容、`Fragment` - 多根性质等等。 **7.自定义渲染器**：`Vue3` 支持创建自定义的渲染器，能实现跨平台，通过改写 `Vue` 底层渲染逻辑，如渲染成小程序形式等等。 ## 一、初始化项目初始化 `Vue3+Vite` 项目： ```javascript npm init vue@latest // or npm init vite@latest projectName ``` 初始化 `Vue3+Webpack` 项目： ```javascript vue create projectName ``` ## 二、setup `setup()` 函数是 `Vue3` 新增的一个选项，它是组合式 `API` 的统一入口，简单来说，就是所有的 `CompositionAPI` 新特性都应该写在这个函数内部。 ```javascript ``` 它接收两个参数： - `props`：这个还是和 `Vue2` 使用的组件之间通信的 `props`一样。 - `context`：定义上下文，这个参数身上有一些我们比较常用的属性，比如 - `context.emit`：等同于 `Vue2` 的 `this.$emit`。 - `context.slots`：等同于 `Vue2` 的 `this.$slots`。 - `context.attrs`：等同于 `Vue2` 的 `this.$attrs`。 - `context.expose()`：当前组件对外暴露属性的函数。 ### expose 关于 `context.expose()` 函数，下面小编写两个例子，看完你应该就能明白了。 ```javascript // parent.vue //child.vue ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1cec56d0b00848f08739f39096b040f7~tplv-k3u1fbpfcp-watermark.image?) 从上面例子中，我们可以看到子组件在 `setup()` 函数中返回的所有东西都可以被父组件直接访问，也就是子组件所有方法或数据等都是公开的。但如果你想开发一个开源的组件或库，你有可能想保持一些内部方法的私有性，并不想它能被父类所调用，那么这个时候应该怎么做呢？我们来看看下面这个例子，给子组件添加 `context.expose()` 函数。 ```javascript //child.vue ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/180234aee72149d3b5e528fc7811556f~tplv-k3u1fbpfcp-watermark.image?) 可以看到，父组件已经无法访问 `age` 属性了，而且 `name` 属性值也是我们重新规定的值了，并不会访问到组件内部的数据。这就是 `context.expose()` 函数的作用，它更加直观的允许组件暴露规定的一切方法和数据。 ## 三、生命周期 `Vue3` 生命周期相比 `Vue2` 做了一些改动，如下： - `Vue3` 用 `setup()` 函数替代了 `beforeCreate` 和 `create` 钩子。 - `Vue3` 生命周期钩子都以 `on+xxx` 开头，并且需要手动导入且只能在 `setup()` 函数内部使用。 ```javascript ``` - 卸载组件过程的两个钩子名称改变，`beforeDestroy` 变成 `onBeforeUnmount`、`destroyed` 变成 `onUnmounted`。 vue2 | 说明 |vue3 | 说明 | | ------------- |--------------- | --------------- | --------------- | | beforeCreate | 在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用。 | setup() | `setup` 函数会比 `beforeCreate` 与 `created` 先执行，记住它是入口，会最先跑。 | | created | 在实例创建完成后被立即同步调用，这个阶段挂载还没开始，所以 `$el` 还不能使用。 | setup() | 同上 | | beforeMount | 在挂载开始之前被调用，相关的 `render` 函数首次被调用，`$el` 依旧还不能用。 | onBeforeMount | 相同 | | mounted | 在实例挂载完成后被调用，这个时候 `$el` 能使用，但是这个阶段不能保证所有的子组件都挂载完成，如果你希望等待整个视图渲染完毕，可以使用 `$nextTick`。 | onMounted | 相同 | | beforeUpdate | 在数据发生改变后，DOM 被更新之前被调用（使用该钩子要注意死循环）。 | onBeforeUpdate | 相同 | | updated | 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用（使用该钩子要注意死循环）。 | onUpdated | 相同 | | beforeDestroy | 实例销毁之前调用，但在这一步，实例仍然完全可用。 | onBeforeUnmount | 相同 | | destroyed | 实例销毁后调用，包括子实例也会被销毁。 | onUnmounted | 相同 | 最后我们放一张钩子执行的对比图，可以发现 `Vue3` 的生命周期钩子是比 `Vue2` 优先执行的。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ab3662eed044a45b5ee523b93cf153f~tplv-k3u1fbpfcp-watermark.image?) ## 四、ref与reactive [ref](https://v3.cn.vuejs.org/api/refs-api.html#ref) 与 [reactive](https://v3.cn.vuejs.org/api/basic-reactivity.html#reactive) 是 `Vue3` 新推出的主要 `API` 之一，它们主要用于响应式数据的创建。既然它们俩都是用于创建响应式数据，那么它们又有什么区别呢？我们带着这个疑问往下看，先来看看它们俩的基本使用： ```javascript ``` 上面写了一个很简单的计数叠加例子，从中可以得到一些结论： - `template` 模板中使用的数据和方法，都需要通过 `setup` 函数 `return` 出去才可以被使用。 - `ref` 函数创建的响应式数据，在模板中可以直接被使用，在 `JS` 中需要通过 `.value` 的形式才能使用。 - `ref` 函数可以接收**原始数据类型**与**引用数据类型**。 - `reactive` 函数只能接收**引用数据类型**。这里我们就知道它们俩的区别了！但是既然这样为啥还需要 `reactive` ，全部使用 `ref` 一把梭不就行了吗？难道是存在什么情况是 `reactive` 能做，但是 `ref` 做不了的？答案：**没有这种情况**，反而是 `reactive` 能做的，`ref` 都能胜任，**并且 `ref` 底层还是使用 `reactive` 来做的!!!** ![3E9488F5.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/448345a6c45a44f6b835af6a3d0b5ae7~tplv-k3u1fbpfcp-watermark.image?) 通过 `Vue3` 的源码是可以证实这个结论的，具体过程感谢兴趣的小伙伴可以[自行查阅](https://github1s.com/vuejs/core/blob/main/packages/reactivity/src/ref.ts)，这里就不做过多阐述了。 > 反正简单来说就是， **`ref` 是在 `reactive` 上在进行了封装**，增强了其能力，使它支持了对原始数据类型的处理，所以在 `Vue3` 中 `reactive` 能做的，`ref` 也能做，`reactive` 不能做的，`ref` 也能做。 ## 五、toRef与toRefs ### [toRef](https://v3.cn.vuejs.org/api/refs-api.html#toref) 官网对它的解释是**可以用来为源响应式对象上的某个 `property` 新创建一个 `ref`。然后，`ref` 可以被传递，它会保持对其源 `property` 的响应式连接。** 按我的理解就是把 `reactive` 创建的响应对象中的某个属性变成一个单独的 `ref` ，但这个新 `ref` 与原对象是保持响应式连接的。概念不理解没关系，我们直接来看看例子： ```javascript ``` ![1.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cffad7ed24bd4d97af7324bc4c7e3417~tplv-k3u1fbpfcp-watermark.image?) 从上面效果图可以看到，通过 `toRef` 创建的变量是具有响应式的并与原对象是保持响应式连接的。 ### [toRefs](https://v3.cn.vuejs.org/api/refs-api.html#torefs) 与前者相比多了一个 "s"，你可以认为它是 `toRef` 的批量操作，它的主要作用，小编觉得有这两方面： - 将 `reactive` 创建的响应对象中每个属性变成单独的 `ref`。 - 结合 `ES6` 的解构，可以使 `reactive` 对象的属性在模板中直接被使用，再也不需要通过 `xx.属性` 的形式。 > 需要注意的是，若直接对 `reactive` 创建的对象解构，会失去响应式！ ```javascript ``` ![2.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f234b03c0814d039dee5dcd86b264c8~tplv-k3u1fbpfcp-watermark.image?) 从效果图可以看到 `person2.age` 是没有响应变化的。 ```javascript person1 的类型: { name: Ref, } person2 的类型: { age: number, } ``` ## 六、响应式对象判断 ### [isRef](https://cn.vuejs.org/api/reactivity-utilities.html#isref) 从名称可以直接看出这个方法的作用，**它用于检查值是否为一个 `ref` 对象。** ```javascript ``` ### [unref](https://cn.vuejs.org/api/reactivity-utilities.html#unref) 如果参数是一个 `ref`，则返回内部值，否则返回参数本身。这个方法可能平常使用到的几率会比较少，它本质是 `isRef` 的三元判断语法糖，等同 `val = isRef(val) ? val.value : val` 。 ```javascript ``` > 你可以认为 `name.value` === `unref(name)`。 ### [isReactive](https://cn.vuejs.org/api/reactivity-utilities.html#isreactive) 检查一个对象是否是由 `reactive` 或 [shallowReactive](https://cn.vuejs.org/api/reactivity-advanced.html#shallowreactive) 创建的代理。 ```javascript ``` ### [isProxy](https://cn.vuejs.org/api/reactivity-utilities.html#isproxy) 检查一个对象是否是由 `reactive`、`readonly`、`shallowReactive` 或 `shallowReadonly` 创建的代理。 ```javascript ``` ### [isReadonly](https://cn.vuejs.org/api/reactivity-utilities.html#isreadonly) 检查一个对象是否是由 `readonly` 或 `shallowReadonly` 创建的代理。 ```javascript ``` ## 七、computed [computed()](https://v3.cn.vuejs.org/api/computed-watch-api.html#computed) 与 `Vue2` 中的 `computed` 作用基本一致，它可以接收一个**函数**或**对象**作为参数，会返回一个**只读**的 `ref` 对象。 ```javascript ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/748dc47975274a74b54c49c946dd0f5d~tplv-k3u1fbpfcp-watermark.image?) ### 修改计算属性如果你尝试修改计算属性的返回值，控制台会有出现提示信息并且修改不会成功。 ```javascript info.value = '修改computed()返回值' ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb92053c26ee469ca22eab4301912f0e~tplv-k3u1fbpfcp-watermark.image?) 但假如你一定要修改 `computed()` 的返回值，我们可以使用它的对象参数来间接修改，该对象需要提供 `set` 与 `get` 方法。 ```javascript ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb74f8d2fcfa47f28d27cdac0e6738b9~tplv-k3u1fbpfcp-watermark.image?) ## 八、watch `Vue3` 的 [watch()](https://v3.cn.vuejs.org/api/computed-watch-api.html#watch) 与 `Vue2` 的 `watch` 选项和 [this.$watch](https://v3.cn.vuejs.org/api/instance-methods.html#watch) API 完全等效。我们先来看看它的基本两种基本用法： ### 监听单一源 ```javascript ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aeb77f2048de43c9ad34521253fdada0~tplv-k3u1fbpfcp-watermark.image?)
### 监听多个源 ```javascript ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bcb97f068310495fafea5f51e008d899~tplv-k3u1fbpfcp-watermark.image?) `watch()` 可以使用数组形式同时监听多个源，并且得到的 `newValue` 与 `oldValue` 也是以数组的形式返回的。 > 当我们只修改 `name` 得到的结果： > ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77ac5e02186a41dc80845b170eff5e90~tplv-k3u1fbpfcp-watermark.image?) 如果是想监听 `reactive` 对象的多个属性，可以这么写： ```javascript const person = reactive({ name: '橙某人', age: 18 }); watch([() => person.name, () => person.age], (newValue, oldValue) => { console.log(newValue, oldValue); // [...], [...] }); ``` ### immediate与deep参数 `Vue` 中 `watch` 选项还有 **immediate** 与 **deep** 参数，在 `Vue3` 中一样还能继续使用。 ```javascript import { reactive, watch } from 'vue'; export default { setup() { const person = reactive({ name: '橙某人', age: 18 }); watch(() => person, (newValue, oldValue) => { console.log(newValue, oldValue) }, { deep: true, immediate: true }); function add() { person.value.name = 'YDYDYDQ'; person.value.age = 20; } return { add }; } } ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c43a04862dc4645836706fe9c1bf481~tplv-k3u1fbpfcp-watermark.image?) 但是这里有两个小坑需要小伙伴们注意，都是针对 `oldValue` 参数： - 开启 **immediate** 参数后，初次监听的 `oldValue` 值是 `undefined`。 - 监听一整个 **引用类型** 变化时，`oldValue` 值与 `newValue` 值一样 (用 `ref` 来定义也是一样)。 ### 停止监听当我们在 `setup` 函数内创建 `watch` 监听，它会在当前组件被销毁的时候自动停止。但如果你想要手动地停止某个 `watch`，可以调用 `watch` 函数的返回值即可。 ```javascript ``` ## 九、watchEffect [watchEffect](https://v3.cn.vuejs.org/api/computed-watch-api.html#watcheffect) 是 `Vue3` 的新函数，你可以认为它是 `watch` 的升级版或加强版，它功能和 `watch` 相似，但却更加强大。 **它接收一个函数作为参数，并会立即执行传入的函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。** 定义看不懂-.-，没关系，我们一样先来看看它的使用方式： ```javascript ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ccb4f99a2de45c893d04dd06012594b~tplv-k3u1fbpfcp-watermark.image?) 从上图中可以看到，`watchEffect` 会被立即执行(可以认为 `immediate: true`)，并且不管是修改 `name` 还是 `age` 都会触发 `watchEffect` 执行。 > 你可以认为 `watchEffect` 内部使用到什么响应数据，就监听了什么响应数据，只要这些响应数据发生变化，就会触发 `watchEffect`。 ### 停止监听当 `watchEffect` 在组件的 [setup](https://v3.cn.vuejs.org/guide/composition-api-setup.html) 函数或 [生命周期钩子](https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html) 被调用时，监听器会被链接到该组件的生命周期，并在组件卸载时自动停止。当然它和 `watch` 一样，也能被手动停止。 ```javascript const stopWatchEffect = watchEffect(() => {}); // 停止WatchEffect stopWatchEffect(); ``` ### 清除副作用首先，什么是副作用呢？在纯函数中，副作用指的是如果一个函数在输入和输出之外还做了其他的事情，那么这个函数额外做的事情就被称为 **副作用**，而产生副作用的函数被称为 **副作用函数**。 > 纯函数：你可以简单认为，我调用一个函数，给它传入参数，会得到一个结果，但这个函数在调用过程中不会对程序中的其他变量进行修改，这种函数即可称之为纯函数。 `watchEffect(effect)` 的回调函数(`effect`)就是一个副作用函数，因为我们使用`watchEffect`就是为了监听响应数据变化后做一些其他操作。一旦副作用函数被执行时，它势必会对程序带来一些影响。有时副作用函数会执行一些异步的副作用，而**异步**则会带来一些响应(副作用)是"失效"的，我们需要及时清除这些响应。而 `watchEffect((onInvalidate) => {})` 监听器可以接收一个 `onInvalidate` 函数作为入参，用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发： - 副作用即将重新执行时。 - 监听被停止。(如果在 `setup` 或生命周期钩子函数中使用了 `watchEffect`，则在组件卸载时) ![1B716F69.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7c42e2b198d4fd69b233aabbe05005c~tplv-k3u1fbpfcp-watermark.image?) 看不懂！！！Em...那我们继续来看例子： ```javascript ``` ![4.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd15bf1e9d264f8a92dff3d334cb904a~tplv-k3u1fbpfcp-watermark.image?) 从上面效果图可以看到，当我们不断点击去修改 `count` 的值时(修改过程时间超过 `1s`)，会频繁触发 `watchEffect`，但是其中的 `setTimeout` 却不会在规定时间内被执行，而是当停止更改后 `1s` 后才被执行。从这个现象有没有让你想起什么呢？没错，就是它，**节流函数**。我们把 `DEMO` 修改修改： ```javascript ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee4172e5128e4924baa28eff98f30a98~tplv-k3u1fbpfcp-watermark.image?) 从这个例子里有没有让你悟出些什么呢？ ## 十、provide与inject `provide` 与 `inject` 是一种跨层级组件（祖孙）通信方式。当组件多层嵌套时，不需要将数据一层一层的向下传递，通过它俩可以实现跨层级组件通信。 ### [provide](https://cn.vuejs.org/api/composition-api-dependency-injection.html#provide) 注入一个值，可以被后代组件接收。它接受两个参数： - 第一个参数是要注入的 `key`，可以是一个字符串或者一个 `symbol`。 - 第二个参数是要注入的值。 ```javascript ``` ### [inject](https://cn.vuejs.org/api/composition-api-dependency-injection.html#inject) 接收一个由祖先组件或整个应用 (通过 `app.provide()`) 注入的值。它接受两个参数： - 第一个参数是注入的 `key`，找不到对应的 `key`，则返回 `undefined` 或默认值。 `Vue` 会遍历父组件链，通过匹配 `key` 来确定所提供的值。如果父组件链上多个组件对同一个 `key` 提供了值，那么离得更近的组件将会 "覆盖" 链上更远的组件所提供的值。如果没有能通过 `key` 匹配到值，`inject` 将返回 `undefined`，除非提供了一个默认值。 - 第二个参数是默认值，非必填，也可以是一个工厂函数。如果默认值本身就是一个函数，那么你必须将 `false` 作为第三个参数传入，表明这个函数就是默认值，而不是一个工厂函数。
`const fn = inject('function', () => {}, false)` ```javascript ``` ![5.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13e6fea0775f477a91696e071f8b79c9~tplv-k3u1fbpfcp-watermark.image?) 从效果图可以看到，修改静态值视图是不更新的，而修改响应式值视图是可以同步更新的。 ### 后代组件修改注入的值 `Vue` 是单向数据流，子组件直接修改父组件传递的数据是不被允许的，这样容易造成数据混乱，来源不明等问题。然而，有时我们确实需要在子组件修改注入的数据，这种情况下我们需要怎么做呢？我们可以在父组件再注入一个方法，提供给后代组件们调用。父组件： ```javascript ``` 后代组件： ```javascript ``` ### 禁止后代组件修改注入的值如果要确保注入的数据不会被后代组件更改，我们可以使用 [readonly](https://cn.vuejs.org/api/reactivity-core.html#readonly) 来加上这个保证。 ```javascript ``` 增加 `readonly` 后，如果你尝试去修改 `inject` 接收的值，则控制台会报出提醒。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f45e930bee1947fc93eaabc12fd62389~tplv-k3u1fbpfcp-watermark.image?) > 当然，即使增加了 `readonly` ，`name` 的响应式可不会消失哦，一样还是响应式的！ ## 十一、全局API 2.x 全局 API（`Vue`） | 3.x 实例 API (`app`) | | ------------------------ | --------------------------- | | [Vue.config.xxx](https://v2.cn.vuejs.org/v2/api/#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE) | [app.config.xxx](https://cn.vuejs.org/api/application.html#app-config) | | [Vue.config.productionTip](https://v2.cn.vuejs.org/v2/api/#productionTip) | **移除** | |[ Vue.component](https://v2.cn.vuejs.org/v2/api/#Vue-component) | [app.component](https://cn.vuejs.org/api/application.html#app-component) | | [Vue.directive](https://v2.cn.vuejs.org/v2/api/#Vue-directive) | [app.directive](https://cn.vuejs.org/api/application.html#app-directive) | | [Vue.mixin](https://v2.cn.vuejs.org/v2/api/#Vue-mixin) | [app.mixin](https://cn.vuejs.org/api/application.html#app-mixin) | | [Vue.use](https://v2.cn.vuejs.org/v2/api/#Vue-use) | [app.use](https://cn.vuejs.org/api/application.html#app-use) | | [Vue.$mount](https://v2.cn.vuejs.org/v2/api/#vm-mount) | [app.mount](https://cn.vuejs.org/api/application.html#app-mount) | | Vue.prototype | [app.config.globalProperties](https://cn.vuejs.org/api/application.html#app-config-globalproperties) | | **无** | [app.provide](https://cn.vuejs.org/api/application.html#app-provide) | | **无** | [unmount](https://cn.vuejs.org/api/application.html#app-unmount) | ## 十二、其余不常用API ### readonly [readonly](https://cn.vuejs.org/api/reactivity-core.html#readonly) 接受一个对象 (不论是响应式还是普通的) 或是一个 `ref`，返回一个原值的只读代理。 ```javascript ``` 当你尝试修改 `readonly` 创建的对象时，控制台会有提示： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c810dac03e94e1da298939346c3263d~tplv-k3u1fbpfcp-watermark.image?) ### shallowRef与shallowReactive [shallowRef](https://cn.vuejs.org/api/reactivity-advanced.html#shallowref) 是 `ref()` 的**浅层作用形式**。说白了就是把对象的第一层数据变成响应式的，深层的数据不会变成响应式的。 `shallowRef` 如果用来定义**原始数据类型**，那么它和 `ref` 是等同的。 ```javascript ``` 点击按钮一： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5239eef986784c289ea9bb2ea09f0416~tplv-k3u1fbpfcp-watermark.image?) 点击按钮二： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95c0d6eda09c4ead9f26274bb211672f~tplv-k3u1fbpfcp-watermark.image?) 你会发现点击 "按钮一" 数据虽然更改了，但是视图却没有更新，这就是 `shallowRef` 的作用。而 [shallowReactive](url) 与 `shallowRef` 类似，就不多说了。 > `shallowRef()` 的作用常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。 ### triggerRef [triggerRef](https://cn.vuejs.org/api/reactivity-advanced.html#triggerref) 用于强制触发依赖于一个[浅层 ref](https://cn.vuejs.org/api/reactivity-advanced.html#shallowref) 的副作用，这通常在对浅引用的内部值进行深度变更后使用。说人话就是替 `shallowRef` 去更新视图。 ```javascript ``` ![9.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/403450d41f1641f5916e0b06eeb0744c~tplv-k3u1fbpfcp-watermark.image?) 你是否在想有 `triggerRef` 那应该就有 `triggerReactive` 吧？还真没有。 ![273DDC3C.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f041a8e177b14946a5b79c3d14163659~tplv-k3u1fbpfcp-watermark.image?) ### customRef [customRef](https://cn.vuejs.org/api/reactivity-advanced.html#customref) 用于创建一个自定义的 `ref`，显式声明对其依赖追踪和更新触发的控制方式。可能前半句你看懂了，但后半句直接就懵逼了吧(-.-)。没事，概念这种东西也不是非记住不可，只要知道有那么一回事（可以自定义一个 `ref`）就可以啦(✪ω✪)。来看看它具体是如何使用的： ```javascript ``` 上面的例子中，`myRef()` 方法的效果就等同于 `Vue` 里面的 `ref`。而其中的关键代码应该是 `track()` 与 `trigger()` 方法了，可惜在 [文档](https://cn.vuejs.org/api/reactivity-advanced.html#customref) 中只有寥寥数语的介绍。 > 一般来说，`track()` 应该在 `get()` 方法中调用，而 `trigger()` 应该在 `set()` 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权。不过，问题不大，猜，我们都能大概猜出，执行这两个方法是要干些什么事情了(＾ω＾) 。 - `track()`：**跟踪数据**，收集数据被使用的情况(依赖)，后续数据被更改了才知道去更新哪里的视图。 - `trigger()`：**更新视图**，当数据被更改了，需要手动通知 `Vue` 去更新视图。 ### shallowReadonly [shallowReadonly](https://cn.vuejs.org/api/reactivity-advanced.html#shallowreadonly) 是 [readonly](https://cn.vuejs.org/api/reactivity-core.html#readonly) 的浅层作用形式。这个API很简单，我们直接看个例子就算了。 ```javascript ``` 需要注意的是，`Vue` 并不希望我们把它用在嵌套的响应式对象中。 > 谨慎使用 > > 浅层数据结构应该只用于组件中的根级状态。请避免将其嵌套在深层次的响应式对象中，因为它创建的树具有不一致的响应行为，这可能很难理解和调试。 ### toRaw [toRaw](https://cn.vuejs.org/api/reactivity-advanced.html#toraw) 根据一个 `Vue` 创建的代理返回其原始对象。 `toRaw()` 可以返回由 `reactive()`、`readonly()`、`shallowReactive()` 或者 `shallowReadonly()` 创建的代理对应的原始对象。以上是官方文档的解释，看着有点懵，我们直接来看个例子： ```javascript ``` 点击按钮后，可以发现数据被更改了，但是视图并没有更新。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/790148db3a6f4cb6a6d022ba417be3c8~tplv-k3u1fbpfcp-watermark.image?) 这就是 `toRaw` 想要表达的一个作用。因为平常我们修改 `ref` 或 `reactive` 等的数据，每次都会自动同步去更新视图，这在某些场景下是对性能的损耗。有时，我们单纯只希望修改数据而已，并不希望视图同样也跟着去更新，这个时候你就可以使用 `toRaw` 方法拿到它的原生数据，对原生数据进行修改，这个操作过程数据不会被追踪，不会去更新视图，这对性能有一定的优化作用。 ### markRaw [markRaw](https://cn.vuejs.org/api/reactivity-advanced.html#markraw) 将一个对象标记为不可被转为代理。返回该对象本身。说人话就是标记一个对象，使其永远不会再成为响应式对象。 ```javascript ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d925f22b620548f893860ae32b52d81b~tplv-k3u1fbpfcp-watermark.image?) 它和 `toRaw` 相似，但也不全一样，可不要搞混了哦。 ## 十三、多根性质-Fragment ```html ``` 相信应该有小伙伴在 `Vue2` 中会遇到这么一个报错： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e741154c4ec545e680abe602f02bb143~tplv-k3u1fbpfcp-watermark.image?) 这报错提示大概的意思是说组件只能有**一个根节点**，很多时候我们都会手动包裹一个 `div` 作为根节点。 ```html ``` 虽然这可能不是一个多大的问题，但这并不友好，大多数情况下我们可能并不需要这个根节点。 > `Vue2` 为什么不引入 `Fragments` ？ > > `Vue2` 限制组件只能有一个根节点，主要原因是虚拟 DOM **Diff 算法**依赖于具有单个根的组件，如果允许 `Fragments` 需要对该算法进行重大更改，不仅要使其正常工作，而且必须使其具有高性能，这是一项非常艰巨的任务。 `Vue3` 中解决了这个问题，它新增了一个类似 `DOM` 的标签元素 ``。如果在组件中出现多元素节点，那么在编译时 `Vue` 会自动为这些元素节点包裹一个`` 标签，并且**该标签不会出现在 `DOM` 树中**。 ```html ``` > `Vue2` 中可以使用 [vue-fragments](https://www.npmjs.com/package/vue-fragments) 库来实现 ``。 ## 十四、Teleport-传送组件 [Teleport](https://cn.vuejs.org/api/built-in-components.html#teleport) 是 `Vue3` 新增的一个内置组件，它能将其插槽内容渲染到 `DOM` 中的另一个位置。因为它的性质，我们也常常称呼它为瞬移组件、传送组件、传送门等等。我们举个栗子来说明(✪ω✪)： ```html ``` ![6.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c89f948543d4b6a96e01ed5cf0dd068~tplv-k3u1fbpfcp-watermark.image?) 通过上面的例子，可以看到使用 `teleport` 的 `to` 属性，我们可以很方便、随意的控制其插槽内容渲染的位置，`to` 属性可以接收各种 **选择器或实际元素**。 > **`` 挂载时，传送的 `to` 目标必须已经存在于 `DOM` 中**。理想情况下，这应该是整个 `Vue` 应用 `DOM` 树外部的一个元素。如果目标元素也是由 `Vue` 渲染的，你需要确保在挂载 `` 之前先挂载该元素。借用 `teleport` 组件的这种性质，现在就能很容易解决 `Vue2` 中组件内部嵌套 `Modal` 或 `Toast` 组件的定位、 `z-index` 层级的问题了。 ### 禁用 Teleport `` 标签一共接收两个属性，除了 `to` 属性，还有一个 `disabled ` 属性，顾名思义，用于禁用功能的。还是上面的例子，我们给它添加 `disabled` 属性： ``` ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79dcb6aa6fa04562b3b4b257bf1f2867~tplv-k3u1fbpfcp-watermark.image?) 可以发现，`` 会直接就渲染插槽的内容，并且点击任何按钮的切换是没有效果的，也就是相当于 `to` 属性完全不生效了。 ## 十五、Suspense组件 `Vue3` 内置组件一共增加了两个，除了 `` 组件，另一个就是 `` 组件了。 [Suspense](https://cn.vuejs.org/api/built-in-components.html#suspense) 它用于协调对组件树中嵌套的异步依赖的处理。看定义应该有点懵，我们还是一样，实践出真理，举个栗子先。 ![1539F504.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1189505300234382bb6f0a73c9fb8258~tplv-k3u1fbpfcp-watermark.image?) > 当然，官网说这还是一个实验性功能！！！ > > `` 是一项实验性功能，它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。新建 `AsyncCom.vue` 组件： ```javascript ``` 在 `App.vue` 中使用： ``` ``` ![65.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c111d3dd4db54225aa9f889f30021511~tplv-k3u1fbpfcp-watermark.image?) `` 组件实际上是一个提升用户友好度的组件，当如果你在渲染时遇到异步依赖项 ([异步组件](https://cn.vuejs.org/guide/components/async.html)或者具有 [`async setup()`](https://cn.vuejs.org/guide/built-ins/suspense.html#async-setup) 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。 > 可以先详细看看下面的异步组件内容，再回过头来看 `` 组件，会有更好的理解。 ## 十六、异步组件在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，`Vue` 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。`Vue` 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。这是 `Vue2` 中对于异步组件的定义介绍，看了这个定义可能你和小编一样懵，那么我们就先来看看如何定义、使用一个异步组件。我们先在 `main.js` 中定义异步组件： ```javascript import Vue from 'vue'; import App from './App.vue'; // 定义一个异步组件 Vue.component('first-async-com', (resolve, reject) => { setTimeout(() => { const comConfig = { render: h => h('p', '我是第一个异步组件，我五秒后才加载！！！') }; resolve(comConfig); }, 5000) }); Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount('#app'); ``` 然后在 `App.vue` 中使用： ```html ``` ![7.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c1ddbd323244e2cb6e06411bb70da4d~tplv-k3u1fbpfcp-watermark.image?) 从效果图中可以看到，我们的异步组件会在五秒后才被挂载到 `DOM` 树上，这对页面性能来说是一个非常好的优化。当然，我们也可以把 `comConfig` 单独写在一个文件中，丢到服务器上，再通过请求去获取，这也是一个优化项目体积的手段。总得来说，异步组件的作用是对于性能的优化。 > ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/210545a7e88a4dfe875ff26188264957~tplv-k3u1fbpfcp-watermark.image?) > > 如果你注册子组件模板想使用 `template` 配置项，那么你可能会遇到上方的报错。 > ```javascript > Vue.component('first-async-com', (resolve, reject) => { > setTimeout(() => { > const comConfig = { > template: '

我是第一个异步组件，我五秒后才加载！！！

', // 报错 > }; > resolve(comConfig); > }, 1000) > }); > ``` > 这是因为 `Vue` 有两种形式的代码 `compiler` 模式和 `runtime` 模式，`Vue` 模块的 `package.json` 的 `main` 字段默认为 `runtime` 模式，指向了 `dist/vue.runtime.common.js` 位置。 > > 解决方式： > ```javascript > import Vue from 'vue/dist/vue.js'; > > new Vue({ > el: '#app', > template: '', > components: { App }, > }) > ``` > 我们重新引入 `Vue` 的 `compiler` 模式的包，再修改一下 `Vue` 初始化的形式，那么子组件的注册即可使用 `template` 配置项了。 ### 配合webpack实现异步组件 ```javascript Vue.component('async-webpack-example', (resolve, reject) => { // webpack会内置实现 require() 方法 require(['@/components/my-async-component'], resolve) }) ``` 上面这个例子是 [官方](https://v2.cn.vuejs.org/v2/guide/components-dynamic-async.html) 介绍的另一种结合 `webpack` 实现异步组件的方式。通过这个特殊的 `require` 语法将会告诉 `webpack` 自动将你的构建代码切割成多个包，这些包会通过 `Ajax` 请求加载。 ### 局部注册异步组件前面我们介绍的是全局注册异步组件，接下来就看看如何在局部中注册异步组件。先创建一个新组件： ```javascript ``` 在 `App.vue` 中局部注册异步组件： ```javascript ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/430bedf26bce4d59abab2d9714954f09~tplv-k3u1fbpfcp-watermark.image?) 从上图中，可以看到该组件会被单独异步加载获取。这是借用 `import()` 语法来实现的导入，你也可以直接提供一个返回 `Promise` 的函数，例如： ```javascript ``` 最后，我们把例子改成同步的形式来进行对比： ```javascript ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a90d07b100543588b3e19932e6207b7~tplv-k3u1fbpfcp-watermark.image?) 可以发现同步形式并没有单独加载组件，它会被打包到一起，并同步加载、顺序渲染。 ### Vue3的异步组件上面罗里吧嗦回顾了一下 `Vue2` 异步组件的内容，那么 `Vue3` 中的异步组件又是如何的呢？整体来说，没啥改变，可能更多的是在语法方面的改变而已。我们直接来看看，在 `Vue3` 项目的 `App.vue` 文件中： ```javascript ``` 同样，你也可以直接提供一个返回 `Promise` 的函数即可： ```javascript import { defineAsyncComponent } from 'vue' const AsyncComp = defineAsyncComponent(() => { return new Promise((resolve, reject) => { // ...从服务器获取组件 resolve(/* 获取到的组件 */) }) }) // ... 像使用其他一般组件一样使用 `AsyncComp` ``` ## 十七、Vue3响应式原理文章字数有点多了，滚动起来总是一卡顿一卡顿的，原理这块只能单独再写一篇文章了，写完会回来补上链接。 ![01886908.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be58159c556048ae9bc2abfeb642561b~tplv-k3u1fbpfcp-watermark.image?) ## 十八、路由 [vue-router](https://github.com/vuejs/router) 相信使用过 `Vue` 的小伙伴都不陌生了，`Vue` 通过它来实现对路由的管理，而在 `Vue3` 中使用 `vue-router` 的版本至少需要为 `4.x.x` 以上，下面我们就来看看它的具体使用过程。 ### 安装 ```javascript npm install vue-router@4 --save ``` ### 基本使用 #### 基础配置与使用创建 `router/index.js` 文件： ```javascript import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'; const routes = [ { path: '/', name: 'Main', component: ()=> import('../views/main.vue') }, { path: '/login', name: 'login', component: ()=> import('../views/login.vue') }, ]; const router = createRouter({ history: createWebHashHistory(), // createWebHashHistory() || createWebHistory() routes }) export default router; ``` 在 `main.js` 中引入： ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router/index' const app = createApp(App) app.use(router) app.mount('#app') ``` 在 `App.vue` 中使用： ```javascript ``` #### 具体业务使用router ```javascript ``` ## 十九、EventBus与mitt `Vue2` 中我们使用 `EventBus` 来实现跨组件之间的一些通信，它依赖于 `Vue` 自带的 `$on/$emit/$off` 等方法，这种方式使用非常简单方便，但如果使用不当也会带来难以维护的毁灭灾难。而 `Vue3` 中移除了这些相关方法，这意味着 `EventBus` 这种方式我们使用不了， `Vue3` 推荐尽可能使用 `props/emits`、`provide/inject`、`vuex` 等其他方式来替代。当然，如果 `Vue3` 内部的方式无法满足你，官方建议使用一些外部的辅助库，例如：[mitt](https://github.com/developit/mitt)。 ### 优点 - 非常小，压缩后仅有 `200 bytes`。 - 完整 `TS` 支持，源码由 `TS` 编码。 - 跨框架，它并不是只能用在 `Vue` 中，`React`、`JQ` 等框架中也可以使用。 - 使用简单，仅有 `on`、`emit`、`off` 等少量实用API。 ### 安装 ```javascript npm install mitt --save ``` ### 基本使用新建 `bus.js` 文件： ```javascript import mitt from 'mitt'; const emiter = mitt(); export default emiter; ``` 在 `main.vue` 组件中引入并监听： ```javascript ``` 在 `login.vue` 组件中引入并发送信息： ```javascript ``` ### 源码 ```javascript export default function mitt(all) { all = all || new Map(); return { all: all, on: function (type, handler) { var handlers = all.get(type); if (handlers) { handlers.push(handler); } else { all.set(type, [handler]); } }, off: function (type, handler) { var handlers = all.get(type); if (handlers) { if (handler) { handlers.splice(handlers.indexOf(handler) >>> 0, 1); // 无符号右移运算符 } else { all.set(type, []); } } }, emit: function (type, evt) { var handlers = all.get(type); if (handlers) { handlers.slice().map(function (handler) { handler(evt); }); } handlers = all.get("*"); if (handlers) { handlers.slice().map(function (handler) { handler(type, evt); }); } }, }; } ``` 以上是精简之后的 `JS` 核心源码，整体来说并不是很难吧(✪ω✪)，它围绕着发布订阅者模式而展开。可能唯一让人感到陌生的代码是无符号右移运算符（[>>>](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift)），关于它的作用小伙伴们就要自行去了解啦。 ## 二十、Pinia [Pinia](https://github.com/vuejs/pinia) 是 `Vue` 官方团队成员专门开发的一个全新状态管理库，并且 `Vue` 的官方状态管理库已经更改为了 `Pinia`。在 [Vuex](https://github.com/vuejs/vuex) 官方仓库中也介绍说可以把 `Pinia` 当成是不同名称的 `Vuex 5`，这也意味不会再出 `5` 版本了。 > 当然，`Pinia` 可不是 `Vue3` 专属，它同样也是适用于 `Vue2` 的。 [中文文档](https://pinia.web3doc.top/) ### 优点 - 更加轻量级，压缩后提交只有`1.6kb`。 - 完整的 `TS` 的支持，`Pinia` 源码完全由 `TS` 编码完成。 - 移除 `mutations`，只剩下 `state` 、 `actions` 、 `getters` 。 - 没有了像 `Vuex` 那样的模块镶嵌结构，它只有 `store` 概念，并支持多个 `store`，且都是互相独立隔离的。当然，你也可以手动从一个模块中导入另一个模块，来实现模块的镶嵌结构。 - 无需手动添加每个 `store`，它的模块默认情况下创建就自动注册。 - 支持服务端渲染（`SSR`）。 - 支持 `Vue DevTools`。 - 更友好的代码分割机制，[传送门](https://juejin.cn/post/7057439040911441957#heading-2)。 ### 安装 ```javascript npm install pinia --save // or npm i pinia -S ``` ### 基本使用 #### 初始化并挂载Pinia 我们还是根据老传统，在`src` 文件夹下，新建 `store/index.js` 文件： ```javascript import { createPinia } from 'pinia'; const pinia = createPinia(); export default pinia; ``` 在 `main.js` 文件中进行全局挂载： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import pinia from './store'; const app = createApp(App); app.use(pinia); app.mount('#app'); ``` #### 创建store 完成 `Pinia` 的初始化后，就可以来定义 `store` 进入具体使用了，而定义 `store` 一共有三种不同形式的写法，下面我们一一列举。创建 `src/store/modules/user.js` 文件： ```javascript import { defineStore } from 'pinia'; // options API模式 export const usePersonStore = defineStore('person', { state: () => { return { name: '人类' } }, actions: { updateName(newName) { this.name = newName; } }, getters: { // getters基本与Vue的计算属性一致 getFullName() { return 'Full' + this.name; } } }) // 对象形式 export const useTeacherStore = defineStore({ id: 'teacher', state: () => { return { name: '老师' } }, actions: { updateName(newName) { this.name = newName; } }, getters: { getFullName() { return 'Full' + this.name; } } }) // setup模式 import { computed, ref } from 'vue'; export const useStudentStore = defineStore('student', () => { const name = ref('学生'); function updateName(newName) { name.value = newName; } const getFullName = computed(() => 'Full' + name.value); return { name, updateName, getFullName } }) ``` 上面例子中，我们列举了同个 `DEMO` 不同的三种写法，它们效果都一样，第一和第二种类似，比较简单；第三种适合 `Vue3` 的 `script setup` 的形式。需要我们注意的是其中的 `id` 是必填且需要唯一的。 #### 具体业务使用store 在 `App.vue` 中使用： ```javascript ``` ![9.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/479a1bfa9ee745b1b0ed394f6a4f9ff9~tplv-k3u1fbpfcp-watermark.image?) 上面我们通过 `actions` 来修改 `state` ，当然你也可以直接就去 `state` ，但是更推荐使用前者。`actions` 支持同步与异步，也支持 `await` 形式。 ### 第三种修改state方法-$patch() 在 `Pinia` 中，一共有三种修改 `state` 的方式： - 直接修改 `state` 。 - 通过 `actions` 修改。 - 通过 `$patch` 批量修改。新建 `src/store/modules/count.js` 文件： ```javascript import { defineStore } from 'pinia'; export const useCountStore = defineStore('count', { state: () => { return { count1: 0, count2: 0, count3: 0, } }, }) ``` 在 `App.vue` 中使用： ```javascript ``` 上面我们展示了直接修改与通过 `$patch()` 方法进行批量修改的两种形式，它们效果一样。那它们有些什么更具体的区别呢？小编从网上的一些文章看到说通过 `$patch()` 修改 `state` 更具性能优势，也就是`$patch()` 方法是经过性能调优的，但是在 [官网](https://pinia.vuejs.org/api/interfaces/pinia._StoreWithState.html#patch) 却好像并没有找到相关介绍。如果小伙伴们有找到这方面的东西，欢迎给我留留言告知，感谢感谢。 ![5E1F6DB0.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac00cf18f0d84c4f8bf5f39788e07dc9~tplv-k3u1fbpfcp-watermark.image?) ### Pinia解构方法-storeToRefs 上面的例子中，我们都是通过 `.xxx` 来访问数据，但是当很多数据被使用时，为了更简洁的使用这些数据，我们都会采用解构的方式来优化。 `ES6` 中普通的解构形式虽然能获取到值，但是却会失去响应式。 `Pinia` 为我们提供了 [storetorefs](https://pinia.vuejs.org/api/modules/pinia.html#storetorefs) API 方便一次性获取所有的数据，并且它们依旧是具备响应式的。新建 `src/store/modules/info.js` 文件： ```javascript import { defineStore } from 'pinia'; export const useInfoStore = defineStore('info', { state: () => { return { name: '橙某人', age: 18 } } }) ``` 在 `App.vue` 文件中使用： ```javascript ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3bd6e63592254028a772e1dcf7c6d3da~tplv-k3u1fbpfcp-watermark.image?) ### store互相调用新建 `src/store/modules/other.js` 文件： ```javascript import { defineStore } from 'pinia'; export const useOtherStore = defineStore('other', { state: () => { return { hobby: ['吃饭', '睡觉', '打豆豆'] } } }) ``` 在 `src/store/modules/info.js` 文件中引入： ```javascript import { defineStore } from 'pinia'; import { useOtherStore } from './other'; export const useInfoStore = defineStore('info', { state: () => { return { name: '橙某人', age: 18 } }, getters: { getHobby() { return useOtherStore().hobby // 获取爱好列表 } } }) ``` ### 数据持久化项目中的状态管理一般我们需要把它进行数据持久化，否则一刷新就会造成数据丢失。而 `Pinia` 配套有个插件 [pinia-plugin-persist](https://seb-l.github.io/pinia-plugin-persist/) 可以帮助我们来做这件事情。安装 ```javascript npm i pinia-plugin-persist -S ``` 初始化 ```javascript import { createPinia } from 'pinia'; import piniaPluginPersist from 'pinia-plugin-persist'; const pinia = createPinia(); pinia.use(piniaPluginPersist); export default pinia; ``` 在对应的 `store` 中开启缓存： ```javascript // info.js import { defineStore } from 'pinia'; import { useOtherStore } from './other'; export const useInfoStore = defineStore('info', { state: () => { return { name: '橙某人', age: 18 } }, getters: { getHobby() { return useOtherStore().hobby } }, persist: { enabled: true, // 开启缓存 } }) ``` 开启缓存后，默认数据是缓存在 `sessionStorage` 里面的。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2250677070c4433fa42af08ff2d49daa~tplv-k3u1fbpfcp-watermark.image?) 也可以指定成 `localStorage` 作为缓存： ```javascript // info.js import { defineStore } from 'pinia'; import { useOtherStore } from './other'; export const useInfoStore = defineStore('info', { state: () => { return { name: '橙某人', age: 18 } }, getters: { getHobby() { return useOtherStore().hobby } }, persist: { enabled: true, // 开启缓存 strategies: [ { key: 'infoStore', // 修改缓存的key storage: localStorage, // 指定localStorage作为缓存 paths: ['name'] // 只缓存name } ] } }) ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a8fe0e9e1af4125aeb3f0f29b5cb926~tplv-k3u1fbpfcp-watermark.image?) 更多细节就自行查阅文档了(✪ω✪)，[传送门](https://seb-l.github.io/pinia-plugin-persist/)。 ****

至此，本篇文章就写完啦，撒花撒花。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2198fba2b674f1b935a63e4abb3cbd7~tplv-k3u1fbpfcp-watermark.image) 希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。

第二层子组件

橙某人

橙某人

我是一个异步组件

Suspense

Loading...

异步组件

Pinia

Pinia

Pinia