--- highlight: atelier-forest-light theme: qklhk-chocolate --- # vue的基本使用和高级特性，周边插件vuex和vue-router 这是我参与更文挑战的第21天，活动详情查看：[更文挑战](https://juejin.cn/post/6967194882926444557) 以下文章将讲解对 `vue` 的基本使用以及各种高级特性还有周边插件 `vuex` 和 `vue-router` ，融合大量案例🌰和动图🕹️进行展示。可以把它当成是 `vue` 的入门宝库，有不懂的语法知识点时或许在这里可以寻找到你的答案并且通过例子运用起来。废话不多说，下面来开始探索 `vue` 的奥秘吧🙆 # 一、vue的使用 ## 1、vue-cli `vue` 项目是基于 `vue-cli` 脚手架搭建的项目。当我们要创建一个项目时，首先要先全局安装 `vue-cli` 脚手架，命令行为： ```bash npm i -g @vue/cli ``` 在搭建完成项目以后，我们需要来了解 `src` 目录下各个文件夹和文件的用法。 ```bash ├── assets 放置静态资源 ├── components 放组件 ├── router 定义路由的相关配置 ├── views 视图 ├── views 视图 ├── app.vue 应用主组件 ├── main.js 入口文件 ``` ## 2、基本使用 ### （1）模板（插值，指令） **1）插值、表达式** ```html //浏览器显示结果 // 文本插值 I am Monday. // JS 表达式 yes ``` **2）动态属性** ```html //浏览器显示结果 //动态属性：id-1622339576875 ``` **3）v-html指令** ```html //浏览器显示结果 //指令 - 原始 html 加粗斜体 ``` 值得注意的是， `v-html` 指令会有 `xss` 风险，且会覆盖子组件，要谨慎使用！！ ### （2）computed和watch **1）computed** `computed` **有缓存**， `data` 不变则不会重新计算。如下代码所示： ```html ``` 此时浏览器的打印结果如图所示。 ![computed](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80610462152c46449a0b87a315d5347c~tplv-k3u1fbpfcp-zoom-1.image) 大家可以看到，当 `num` 的值如果一直是 `20 ` 的值时，那么 `double1` 和 `double2` 的 `get()` 方法是不会重新计算的，它会被缓存下来，达到提高运算性能的效果。 **2）watch** - `watch` 监听基本数据类型时，可正常拿到 `oldVal` 和 `val` 的值。 - `watch` 如果监听引用数据类型时，需要进行深度监听，且拿不到 `oldVal` 。因为指针相同，监听时，指针已经指向了新的 `val` 。如下代码所示： ```html ``` ### （3）class和style - 使用动态属性，即 `v-bind` 绑定； - 使用驼峰式写法。 **如下代码所示：** ```html ``` 此时浏览器的显示效果如下。 ![class和style](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95f31c35e7354f17b774036d08deeba8~tplv-k3u1fbpfcp-zoom-1.image) ### （4）条件 - `v-if` 、 `v-else` 的用法：可使用**变量**，也可以使用 **===** 表达式。 - `v-if` 和 `v-show` 的区别？ - `v-if` 会根据条件对元素进行渲染的控制，此处的控制渲染指的是将元素添加到 `dom` 中或移除 `dom `，所以会**存在dom的增删**。假设页面初始化时，条件判断结果为 `false` ，则不会将该元素添加到 `dom` 当中。 - `v-show` 与 `v-if` 不一样的是，不管条件是 `true` 还是 `false` ，都会将对应的元素添加到 `dom` 中，在条件为 `false` 时将元素的 `css` 属性`display`设置为`none`，所以我们只是肉眼看到元素从页面中消失了，但是它还存在于 `dom` 当中。 - `v-if` 和 `v-show` 的使用场景？ - `v-if` 适用于条件变化频率不高的时候，这样不会频繁的去对 `DOM` 进行增删操作； - `v-show` 适用于需要做频繁切换的时候，比如说A和B两个元素，需要一会显示 `A` ，一会显示 `B` ，这样就算比较频繁。如果去操作 `v-if` ，让 `DOM ` 疯狂的增添和销毁是会非常耗费性能的，所以这个时候就应该用 `v-show` ， `display` 属性原本就已经存放在 `DOM` 当中，只是对 `display` 属性进行修改修做即可。 **具体使用方式如下代码所示：** ```html ``` ### （5）循环（列表）渲染 - `vue` 中如何遍历对象？ —— 使用 `v-for` 。 - `v-for` 和 `v-if` 不能一起使用。 - `key` 的重要性。在对数据进行 `v-for` 遍历时，需要加上 `key` 值来保证数据的唯一性。同时， `key` 不能乱写，一般不要使用 `random` 或者 `index` ，而是绑定一个**与该绑定数据相关的唯一值**来确定。如果用 `random` 或者 `index` 时，在对数据进行删除或增添操作时，有可能会出现**数据错乱**等问题出现。 - `key` 的作用。在对节点进行 `diff` 的过程中，判断两个节点是否为相同节点的一个很重要的条件就是 **`key` 值是否相等**，如果 `key` 值相等，则说明两个节点是相同节点，所以会尽可能的复用原有的 `DOM` 节点，减少不必要的 `DOM` 操作，提升系统性能。下面用一段代码演示 `v-for` 遍历数组和遍历对象时的效果。 ```html ``` **此时浏览器的显示效果如下所示：** ![v-for](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74bc327f59774ddfaaf40a2df9c94354~tplv-k3u1fbpfcp-zoom-1.image) ### （6）事件 **1）event参数，自定义参数** 下面通过绑定一个两个按钮事件，来观察 `vue` 中的事件，参数时怎么进行传递的，事件又会被绑定到哪里去？ ```html ``` 大家可以看到，上面的 `increment1` 方法，没有传递参数，则它可以直接使用 `event` 来触发当前对象；而 `increment2` 方法中，通过传递了一个 `2` 的参数，我们可以通过 `$event` 的方式，把 `2` 传递进来，之后同样用 `event` 触发原生对象。同时，当触发到当前元素时，事件会被挂载到当前元素，和 `DOM` 事件一样。 **此时浏览器的打印效果如下：** ![$event](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/279abe7afbb64de89066466ce7d67b2a~tplv-k3u1fbpfcp-zoom-1.image) **2）自定义事件** 上面的演示中， `vue` 事件是直接挂载到 `vue` 上面进行监听的。而下面的代码中，我们可以看到，如果我们需要自定义一个事件，而不进行直接挂载，则可以通过 `addEventListener` 来进行注册。但值得注意的是，用 `vue` 绑定的事件，**组件销毁时会自动进行解绑**。但是呢，如果是**自己定义的事件**，**需要自己再进行手动销毁**！！这一点需要特别注意，不然写代码过程很容易因为没有销毁热导致后面引发的一系列 `bug` 出现。 ```js ``` **3）事件修饰符** 对于 `vue` 来说，经常用到的修饰符有下面**6种事件修饰符**和**3种按键修饰符**。 ```html

...

``` ```html ``` ### （7）表单在vue项目中，主要使用 `v-model` 指令在表单 `input` 、 `textarea` 、 `checkbox` 、 `radio` 、 `select` 等元素上创建**双向数据绑定**。对于 `v-model` 来说，常见的修饰符有 `trim` 、 `lazy` 和 `number` 。 `trim` 表示去除输入内容前后的空格， `lazy` 表示需要按回车键数据才会进行创建， `number` 表示把用户输入的值转换为 `number` 类型，如果先输入字符，则整串数据都会被当成字符串 `string` 类型看待，如果先输入数字，后输入字母，则后面的字母无法输入到输入框当中。 **接下来我们用代码演示一遍常见的表单。** ```html ``` **此时浏览器的显示效果如下：** ![表单](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a247b91661894e41a3e9c4c106d39a95~tplv-k3u1fbpfcp-zoom-1.image) ## 3、组件 ### （1）props和$emit（适合父子组件间的通信） | 传递形式 | 通信方式 | | :------: | :----------------------------------------------------------: | | $emit | 子组件向父组件传递数据 | | props | 父组件的数据需要通过props把数据传给子组件，props的取值可以是**数组**也可以是**对象** | ### （2）组件间通信 - 自定义事件除了父子组件通信外，一般还有**兄弟间的组件通信**。对于兄弟间的组件通信来说， `兄弟1` 可以通过 `event.$on` 来绑定自定义事件，绑定完成之后，需要再 `beforeDestroy` 的生命周期里面用 `event.$off`及时销毁自定义事件，防止内存泄漏发生。之后 `兄弟2` 通过 `event.$emit` 来调用 `兄弟1` 的自定义事件。下面我们结合父子组件通信和兄弟组件通信的知识点，来实现一个**添加和删除元素**的功能。**具体代码如下：** **父组件index.vue：** ```html ``` **子组件List.vue：** ```html ``` **子组件Input.vue：** ```html ``` **event.vue：** ```js import Vue from 'vue' export default new Vue() ``` **此时浏览器的显示效果如下：** ![props-$emit](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd2c68ea88694b8cabd32ccd4e8d3f62~tplv-k3u1fbpfcp-zoom-1.image) ### （3）组件生命周期 **1）组件生命周期（单个组件）** 一般来说，组件生命周期的执行顺序为：**挂载阶段 → 更新阶段 → 销毁阶段**。下面给出常用组件生命周期的解析。 | 生命周期钩子 | 介绍 | | ----------------- | ------------------------------------------------------------ | | beforeCreate | 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 | | **created** | 页面还没有渲染，但是vue的实例已经初始化结束。 | | beforeMount | 在挂载开始之前被调用：相关的 render 函数首次被调用。 | | **mounted** | 页面已经渲染完毕。 | | beforeUpdate | 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 | | updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 | | activated | keep-alive 组件激活时调用。 | | deactivated | keep-alive 组件停用时调用。 | | **beforeDestroy** | 实例销毁之前调用。在这一步，实例仍然完全可用。**常用场景有：** 自定义事件的绑定要解除、setTimeout等定时任务需要销毁、自己绑定的window或者document事件需要销毁。 | | destroyed | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 | **2）组件生命周期（父子组件）** **加载渲染过程** ```bash 　　父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted ``` **子组件更新过程** ```bash 　　父beforeUpdate->子beforeUpdate->子updated->父updated ``` **父组件更新过程** ```bash 　　父beforeUpdate->父updated ``` **销毁过程** ```bash 　　父beforeDestroy->子beforeDestroy->子destroyed->父destroyed ``` # 二、vue的高级特性 **vue的高级特性主要有以下6种：** - 自定义 `v-model` - $nextTick - slot - 动态、异步组件 - keep-alive - mixin 下面对这6种高级特性进行一一讲解。 ## 1、自定义 v-model 在文章的前半部分我们有讲到了 `v-model` 在表单中的应用，那么接下来我们将动手来实现一个 `v-model` 。 **第一步**，我们先定义一个子组件，名字叫 `CustomVModel.vue` ，具体代码如下： ```html ``` **第二步**，我们在父组件中使用上面的这个子组件： ```html ``` 通过上面的代码我们可以发现，通过绑定 `value` 属性和 `input` 事件这两个语法糖，最终实现数据的双向绑定。此时我们看下浏览器的显示效果。 ![自定义v-model](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f5f7d01449943be85e294088e0b0f7a~tplv-k3u1fbpfcp-zoom-1.image) 通过上图我们自己发现，结果跟实际的 `v-model` 结果是一样的。至此，我们就实现了自定义的 `v-model` ，以此来操作**数据的双向绑定**。 ## 2、$nextTick ### （1）知识点 **先来了解三个知识点：** - `Vue` 是**异步渲染**； - 当 `data` 发生改变之后， `DOM` 不会立刻进行渲染； - `$nextTick` 会在 `DOM` 渲染之后被触发，以获取最新 `DOM` 节点。 ### （2）例子展示🌰 假设我们现在要实现一个功能，当我们点击按钮时，打印出列表的项数。这个时候我们大多人可能会这么操作。 ```html ``` 此时浏览器的显示效果如下。 ![nextTick](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2579ac3c1e82432fa349bfd1aa9f97b2~tplv-k3u1fbpfcp-zoom-1.image) 细心的小伙伴已经发现，浏览器并没有按照我们所想的打印。当页面上的列表显示 `6项` 内容时，此时控制台只打印 `3项` ；当显示 `9项` 时，此时控制台直接只打印 `6项` 。 **那这究竟时为什么呢？** 其实，当我们点击的那一刻， `data` 发生变化，但是 `DOM` 并不会立刻进行渲染。所以等到我们点击完成的时候，获取的元素还是原来触发的内容，而不会增添上新的内容。那我们所期望的是，当点击之后立刻触发 `DOM` 渲染并拿到最新的值。这个时候就需要用到 `nextTick` 。具体代码如下： ```html ``` 我们通过给获取DOM元素的代码外面再嵌套一层 `$nextTick` 函数，来达到我们想要的效果。在此过程中，当我们点击结束后，data的值发生变化，此时 `$nextTick` 会等待DOM全部渲染完成之后再进行回调。 **最终浏览器的打印效果如下：** ![nextTick2](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/761f606427294f68b21a0b8e0adf8dcf~tplv-k3u1fbpfcp-zoom-1.image) ## 3、slot插槽 ### （1）插槽的作用让用户可以**拓展组件**，去更好地**复用组件**和对其**做定制化处理**。 ### （2）三种插槽类型 #### 1）普通slot插槽 slot的基本使用方法是，父组件往子组件中插入一段内容。我们来演示一下。假设我们现在有一个子组件，名字叫SlotDemo.vue，它的代码如下。 ```html ``` 我们可能希望这个 `` 标签内绝大多数情况下都渲染文本 `Sunday` ，但是有时候却希望渲染文本不是 `Sunday` ，而是其他内容，那该怎么实现呢？我们就可以将 `Sunday` 作为**后备内容**，这个时候把它放在 `` 标签内： ```html Sunday ``` 现在，我定义一个父级组件，名字叫 `index.vue` ，并且在父级组件中引用上面的 `SlotDemo` 组件，具体代码如下： ```html ``` 这个时候**后备内容** `Sunday` 就会被渲染出来。此时浏览器显示效果如下： ![后备内容Sunday](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02be7822bd0244588ba8dca249335e5f~tplv-k3u1fbpfcp-zoom-1.image) 那么如果想要把这个**后备内容**渲染成我们想要的内容，而不是 `Sunday` 呢，这个时候我们应该这么做： ```html {{website.title}} ``` 我们可以通过在父组件 `index.vue` 中引用的子组件 `SlotDemo.vue` 里面，插入我们想要的内容。这个时候子组件 `SlotDemo.vue` 的**后备内容** `Sunday` 就会渲染成**我们提供的新内容**，以此来达到我们想要的目的。 **此时浏览器的打印效果如下：** ![后备内容Monday](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/11490a89b8e7455ba57f0dae0fdfcb43~tplv-k3u1fbpfcp-zoom-1.image) #### 2）作用域插槽slot-scope vue官方的说法给到的解释是： - 父组件模板的所有东西都会在父级作用域内编译； - 子组件模板的所有东西都会在子级作用域内编译。这样看起来好像有点难懂，接下来我们用一个例子来了解**作用域插槽**想要解决的问题究竟是什么！首先，我们先定义一个子组件，名字叫 `ScopedSlotDemo.vue` ，**具体代码如下所示：** ```html ``` 通过以上代码可以分析，这个时候我们想要把 `slot` 里面想要呈现的内容绑定下方的data数据，于是通过 `{{website.subTitle}}` 引用。 *** 接下来我们定义一个父组件，名字叫 `index.vue` ，父组件代码如下： ```html ``` 我们希望父组件不显示子组件的后备内容 `subTitle` ，而是显示子组件的另外一个 `data` 属性 ➡ `title` ，于是我们按照**默认绑定**的操作，直接在父组件进行 `{{website.title}}` 的绑定。**此时我们运行一下：** ![作用域插槽报错](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3319da81cf004271b19d65c0f61b74ce~tplv-k3u1fbpfcp-zoom-1.image) 阿欧！这是什么东西呢？为什么会报错呢？这就谈到了我们开头说的定义了。在vue当中，**父组件模板**的所有东西只会在**父级作用域**内编译；**子组件模板**的所有东西只会在**子级作用域**内编译。所以，我们在父组件当中引用子组件的内容，当然是要报错的。这就相当于，一个父亲称呼他的儿子为爸爸一样，怎么可能嘛对吧！在vue中，父级组件只能访问父级的数据，而子级组件也只能访问子级的数据，不能跃级访问。因此，有了这个问题的出现，我们引用了**作用域插槽**来解决这个问题。怎么做呢？来看下面内容。 *** 我们需要在父级作用域 `index.vue` 中为我们要绑定的元素设置一个 `v-slot` ，这个 `v-slot` 用来定义我们提供的插槽 `prop` 的名字。 **index.vue:** ```html ``` *** 那么父级定义完只是第一步，接下来我们要让子级 `ScopedSlotDemo.vue` 的插槽内容在父级当中可用，于是我们需要在子级的插槽中绑定一个自定义事件，并且指向我们需要的数据，**如下代码所示：** **ScopedSlotDemo.vue:** ```html {{website.subTitle}} ``` 从上面我们可以看到，我们通过绑定一个自定义事件 `v-bind:slotData` ，并把它指向我们想要的数据 `website` 。指向之后，我们在父级的插槽当中，通过 `slopProps.slotData` ，就可以访问到自己子级 `website` 的数据，这样，就达到最终我们想要的效果。最终浏览器访问结果： ![作用域插槽成功访问子级数据](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a1758e8b353422eafcb575402d34a32~tplv-k3u1fbpfcp-zoom-1.image) *** 最后贴上完整的父子级代码，大家可以根据以上讲解进行演示。 **子级 ScopedSlotDemo.vue:** ```html ``` **父级 index.vue:** ```html ``` #### 3）具名插槽 **具名插槽的定义：** 将父组件中的内容插入指定的子组件位置中。接下来来看一下具名插槽是怎么使用的？有时候我们一个组件里需要**多个插槽**。比如，现在我们有一个子组件，名字叫 `named.vue` ，具体代码如下： ```html ``` 大家可以看到，上面的代码中，我们希望在 `header` ， `main` 和 `footer` 当中放入对应模块的内容进去，这个时候就需要使用**多个插槽**来解决。 *** 那怎么处理呢？对于这样的情况， `` 元素有一个特殊的属性： `name` ，这个属性可以用来**定义额外的插槽**。我们通过使用 `name` 属性来对子组件 `named.vue` 的插槽加上属性名。**具体做法如下：** ```html ``` 值得注意的是，如果一个 `` 不带 `name` 属性的话，那么它的 `name` 默认为 `default` 。 *** 子级组件插入完插槽之后，接下来我们来定义一个父组件 `index.vue` 。在向子级组件的具名插槽提供内容的时候，我们可以在父级组件的 `

这里是页面标题