面试题——vue面试题总结

た入场券 2023-01-18 11:29 428阅读 0赞

# vue面试题总结 #

### 1.vue的特点是什么 ###

1.国人开发的轻量级框架

2.双向数据绑定，在数据操作方面更为简单

3.视图，数据，结构分析，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作

4.组件化，方便封装和复用

5.虚拟dom：dom的操作是非常耗费性能的，不再使用原生的dom操作节点，极大释放dom操作

### 2.vue中父子组件是如何操作的 ###

https://www.cnblogs.com/wzfwaf/p/11280153.html

1、路由配置：使用children属性实现路由嵌套，嵌套的组件关系就是父子组件关系；

2、组件传值-父组件向子组件传值；

第一步：父组件 在引用子组件时，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用

第二步：把父组件传递过来的数据， 在 props数组 中定义一下：

1.  组件中的 所有props 中的数据，都是通过父组件传递给子组件的
2.  props 中的数据都是只读的，无法重新赋值

第三步：在该子组件中使用props数组 中定义好的数据

3、组件传值-父组件把方法传递给子组件

第一步：父组件向子组件传递方法，使用事件绑定机制 v-on，自定义一个事件属性，传递给子组件

第二步：在子组件中定义一个方法，在方法中，利用 $emit 触发 父组件传递过来的，挂载在当前实例上的事件，还可以传递参数

第三步：在子组件中调用定义的那个方法，就可以触发父组件传递过来的方法了

4、组件传值-子组件通过事件调用向父组件传值

在子组件中，利用 $emit 触发 父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件

5、父子组件之间相互传值

### 3.v-if和v-show指令的区别 ###

共同点：都能控制元素的显示和隐藏

不同点：本质方法不同

v-show本质是通过css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向dom树内添加或删除dom元素，若初始值是false，就不会编译了，而且v-if不停地销毁和创造比较消耗体能

总结：如果要频繁切换某节点，使用v-show（切换开销比较小，初始开销比较大）

不需要频换切换节点使用v-if（初始渲染开销较小，切换开销较大）

### 4.说出几种vue当中的指令和作用 ###

v-model 双向数据绑定

v-for 循环

v-if v-show 显示与隐藏

v-on 事件

v-once 只绑定一次

### 5.vue-loader是什么？用途有哪些 ###

vue的一个加载器，将template/js/style转换成js模块

用途：js可以写es6，style样式，可以写scss或者less,template可以加jade

### 6.axios是什么，怎么使用 ###

请求后台资源的模块

安装

npm install axios --save

js中使用import引入，然后执行.get .post请求,如果成功返回在.then函数中，失败则返回在.catch函数中

### 7.单页面应用和多页面应用区别及优缺点 ###

**单页面应用（SPA）**，通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入。

优点：

1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小

2，前后端分离

3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

缺点：

1，不利于seo

2，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

3，初次加载时耗时多

4，页面复杂度提高很多

**多页面（MPA）**，就是指一个应用中有多个页面，页面跳转时是整页刷新优点：

1.多个页面之间跳转，用户可以清晰的了解整个网站的内容构成；

2.页面结构的分布也不会很拥挤；

3.实现简单，开发成本低；

4.适用于对搜索引擎支持较高，页面跳转较少，数据传递较少的项目中开发。

缺点：

1.页面跳转时，要重新执行css，js等文件，页面片段之间跳转较慢，需要用到页面跨页面传值的几种方法；

2.实现转场动画比较困难。维护成本高。

### 8.简述vue常用的修饰符和作用 ###

.stop:等同于js中的event.stopPropagation(),防止事件冒泡

.prevent:等同于js中的event.stopDefault()，防止执行预设的行为（如果时间可取消，则取消该事件，而不是停止事件的进一步传播）

.capture:与事件冒泡的方向相反，事件捕获由外到内

.self:只会触发自己范围内的事件，不包含子元素

.once:只会触发一次

### 10.前端如何优化网站性能 ###

*  减少http请求数量
 *  可以通过精灵图，合并css和js文件，懒加载lazyload等方式来减少请求
 *  控制资源文件加载优先级
 *  利用浏览器缓存
 *  减少dom操作
 *  图标使用iconfont替换image

### 11.vue中样式绑定语法 ###

1.对象方法 v-bind:class="{'orange':isRipe,'green':isNotRipe}"
    2.数组方法 v-bind:class="[class,class1]"
    3.行内 v-bind:style="{color:color,fontSize:fontSize+'px'}"

### 12.简述vue中每个生命周期具体适合那些场景 ###

*  beforeCreate：创建前，此阶段为实例初始化之后，this指向创建的实例，此时的数据观察事件机制都未形成，不能获得DOM节点。  
    data，computed，watch，methods 上的方法和数据均不能访问。  
    可以在这加个loading事件。
 *  created：创建后，此阶段为实例已经创建，完成数据（data、props、computed）的初始化导入依赖项。  
    可访问 data computed watch methods 上的方法和数据。  
    初始化完成时的事件写在这里，异步请求也适宜在这里调用（请求不宜过多，避免白屏时间太长）。  
    可以在这里结束loading事件，还做一些初始化，实现函数自执行。  
    未挂载DOM，若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。
 *  beforeMount：挂载前，虽然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。  
    beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
 *  mounted：挂载，完成创建vm.$el，和双向绑定  
    完成挂载DOM和渲染，可在mounted钩子函数中对挂载的DOM进行操作。  
    可在这发起后端请求，拿回数据，配合路由钩子做一些事情。
 *  beforeUpdate：数据更新前，数据驱动DOM。  
    在数据更新后虽然没有立即更新数据，但是DOM中的数据会改变，这是vue双向数据绑定的作用。  
    可在更新前访问现有的DOM，如手动移出添加的事件监听器。
 *  updated：数据更新后，完成虚拟DOM的重新渲染和打补丁。  
    组件DOM已完成更新，可执行依赖的DOM操作。  
    注意：不要在此函数中操作数据（修改属性），会陷入死循环。
 *  activated：在使用vue-router时有时需要使用\`\`来缓存组件状态，这个时候created钩子就不会被重复调用了。  
    如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。
 *  deactivated：< keep-alive> < /keep-alive>组件被移除时使用。
 *  beforeDestroy：销毁前，  
    可做一些删除提示，如：您确定删除xx吗？
 *  destroyed：销毁后，当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。  
    这时组件已经没有了，无法操作里面的任何东西了。

### 13.scss是什么 ###

预处理css，把css当前函数编写，定义变量,嵌套.

### 14.如何避免回调函数 ###

模块化：将回调函数转换为独立的函数

使用流程控制库，例如 aync

使用promise

使用 aync await

### 15.使用npm有什么好处 ###

1.安装和管理项目的依赖，并且能够指明依赖的具体版本号

2.对于node应用开发而言，可以通过package.json文件来管理项目信息，配置脚本，以及指明依赖的 具体版本

3.npm install XX -S(–save) dependencies 会发布到生产环境的

npm install XX -D(–save-dev) devDependencies 里面的插件只用于开发环境，不会发布到生产环境（构建工具webpack）

4.项目转换的时候，不会把node\_modules包发过去，拿到没有node\_modules的项目时，npm install 安装回来

### 16.一般来说，针对不同的浏览器写不同的css，就是css Hack ###

### 17.消除一个数组里面重复的元素 ###

arr1=[]
    var arr2=[1,2,3,4,5,6,6,7,7]
    for (var i=0,len=arr2.length;i<len;i++){ 
        if (arr1.indexOf(arr2[i])<0){ 
            arr1.push(arr2[i])
        }
    }

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

indexof() ：在字符串中从前向后定位字符和字符串；所有的返回值都是指在字符串的绝对位置，如为空则为- 1

string test=“asdfjsdfjgkfasdsfsgfhgjgfjgdddd”;

test.indexof(‘d’) =2 //从前向后 定位 d 第一次出现的位置

test.indexof(‘d’,1) =2 //从前向后 定位 d 从第二个字符串开始 即s开始 第一次出现的位置

### 18.写一个function，清除字符串前后的空格（兼容所有浏览器） ###

function trim(str){ 
        if (str & typeof str ==="string"){ 
            return str.replace(/(^s*)|(s*)$/g,"")//去除前后空白符
        }
    }

### 19.一次完整的http事物是怎样的一个过程 ###

基本流程：

1.域名解析

2.发起tcp的三次握手

3.建立tcp连接后发起http请求

4.服务端响应http请求，浏览器得到html代码

5.浏览器解析html代码，并请求html代码中的资源

6.浏览器对页面进行渲染呈现给用户

### 20.常用的es6的功能 ###

**原生 Promise**

用 promise 替代回调地狱

> ES5
> 
> **function** printAfterTimeout(**string**, timeout, done)\{
> 
> setTimeout(**function**()\{
> 
> done(**string**);
> 
> \}, timeout);
> 
> \}
> 
> printAfterTimeout('Hello ', 2e3, **function**(result)\{
> 
> console.log(result);
> 
> *// nested callback*
> 
> printAfterTimeout(result + ‘Reader’, 2e3, **function**(result)\{
> 
> console.log(result);
> 
> \});
> 
> \});

这个函数接收一个回调，在 `done` 后执行。我们想要先后执行两次，所以在回调中又一次调用了 `printAfterTimeout`。

如果需要 3 或 4 次回调，代码很快就一团糟了。那么用 promise 如何实现呢：

> ES6
> 
> **function** printAfterTimeout(**string**, timeout)\{
> 
> **return** **new** Promise((resolve, reject) => \{
> 
> setTimeout(**function**()\{
> 
>  resolve(**string**);
> 
> \}, timeout);
> 
> \});
> 
> \}
> 
> printAfterTimeout('Hello ', 2e3).**then**((result) => \{
> 
> console.log(result);
> 
> **return** printAfterTimeout(result + ‘Reader’, 2e3);
> 
> \}).**then**((result) => \{
> 
> console.log(result);
> 
> \});

promise 中可以用 `then` 在某个函数完成后执行新的代码，而不必再嵌套函数。

**箭头函数**

ES6 没有移除函数表达式，但是新增了箭头函数。

ES5 中，`this` 的指向有问题：

> ES5
> 
> **var** \_this = **this**; *// need to hold a reference*
> 
> $(’.btn’).click(**function**(event)\{
> 
> \_this.sendData(); *// reference outer this*
> 
> \});
> 
> $(’.input’).on(‘change’,**function**(event)\{
> 
> **this**.sendData(); *// reference outer this*
> 
> \}.bind(**this**)); *// bind to outer this*

在函数内，需要用临时变量指向 `this` 或者使用 `bind` 绑定。ES6 中可以使用箭头函数。

### 21.link和@import的区别 ###

两者都是外部引用css的方式，但是存在一定的区别

1.link是xhtml标签，除了能够加载css，还可以定义rss等其他事务，而@import属于css范畴，只可以加载css；

2.link引用css时，在页面加载时同时加载；@import需要页面完全载入以后在加载

3.link是XHTML标签，无兼容问题；@import则是在css2.1提出的，低版本的浏览器不支持

4.link支持使用js控制dom改变样式；而@import不支持

### 22.描述一下 cookie，sessionStorage和localStorage的区别 ###

cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），cookie数据始终在同源的http请求中携带（即使不需要），在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

**存储大小：**

cookie数据大小不能超过4k

sessionStorage和localStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或者更大

**有效时间：**

localStorage 存储持久数据，浏览器关闭后数据不会丢失除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

### 23.mvvm模式和mvc的区别是什么? ###

MVC（Model-View-Controller）

MVVM（Model-View-ViewModel）

他们之间的区别主要是MVC中Controller演变成了MVVM中的viewModel。MVVM主要解决了MVC中大量的DOM操作带来的问题。MVVM中当和Model频繁发生变化，开发者需要主动更新到View。

### 24.谈谈你对MVVM开发模式的理解，**它适用于哪些场景？** ###

MVVM分为model，view，viewmodel三者

*  model：代表数据模型，数据和业务逻辑都在model中定义
 *  view：代表ui视图，负责数据的展示
 *  viewmodel：负责监听model中数据的改变并且控制视图的更新，处理用户交互操作

这种模式实现了model和view的数据自动同步，因此开发者只需要专户对数据的维护操作即可，而不需要自己操作dom

在数据操作比较多的场景中，MVVM框架更合适，有助于通过操作数据渲染页面。

### 25.active-class是哪个组件的属性 ###

vue-router模块的 router-link组件的属性。

### 26.如何定义vue-router的动态路由 ###

在静态路由名称前面添加冒号，例如：设置id动态路由参数，为路由对象的path属性设置/:id。

### 27.如何获取传过来的动态参数 ###

在组件中，使用$router对象的 params.id，即 $route.params.id 。

### 28.**V-model是什么？有什么作用？** ###

v- model是 Vue. js中的一条指令，可以实现数据的双向绑定。

### 29.**Vue.js中标签如何绑定事件？** ###

绑定事件有两种方式。

第一种，通过v-on指令， 。

第二种，通过@语法糖，< input@ click= doLog()/>。

### 30.**vuex是什么？如何使用？在哪种功能场景中使用它？** ###

vuex是针对 Vue. js框架实现的状态管理系统。

为了使用vuex，要引入 store，并注入Vue.js组件中，在组件内部即可通过$ ostore访问 store对象。

使用场景包括：在单页应用中，用于组件之间的通信，例如音乐播放、登录状态管理、加入购物车等。

### 31.**导航钩子有哪些？它们有哪些参数？** ###

导航钩子又称导航守卫，又分为全局钩子、单个路由独享钧子和组件级钧子。

全局钩子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。

单个路由独享钩子有 beforeEnter。

组件级钩子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。

它们有以下参数。

to：即将要进入的目标路由对象。  
from：当前导航正要离开的路由。  
next：一定要用这个函数才能到达下一个路由，如果不用就会遭到拦截。

### 32.**请详细说明你对Vue.js生命周期的理解。** ###

总共分为8个阶段，分别为 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。

beforeCreate：在实例初始化之后，数据观测者（ data observer）和 event/ watcher事件配置之前调用。  
created：在实例创建完成后立即调用。在这一步，实例已完成以下的配置：数据观测者，属性和方法的运算， watch/event事件回调。然而，挂载阶段还没开始， e l 属 性 目 前 不 可 见 。 b e f o r e M o u n t ： 在 挂 载 开 始 之 前 调 用 ， 相 关 的 r e n d e r 函 数 首 次 调 用 。 m o u n t e d : e l 被 新 创 建 的 v m . el属性目前不可见。 beforeMount：在挂载开始之前调用，相关的 render函数首次调用。 mounted: el被新创建的vm. el属性目前不可见。beforeMount：在挂载开始之前调用，相关的render函数首次调用。mounted:el被新创建的vm.el替换，并且在挂载到实例上之后再调用该钩子如果root实例挂载了一个文档内元素，当调用 mounted时vm.sel也在文档内。  
beforeUpdate：在数据更新时调用，发生在虛拟DOM重新渲染和打补丁之前。  
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩。  
beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。  
destroyed：在 Vue. js实例销毀后调用。调用后，Vue. js实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

**当使用组件的kep- alive功能时，增加以下两个周期。**

*  activated在keep- alive组件激活时调用；
 *  deactivated在keep-live组件停用时调用。

### 33.**请说出vue.cli项目的src目录中每个文件夹和文件的用法。** ###

assets文件夹存放静态资源；

components存放组件；

router定义路由相关的配置；

view是视图；

app. vue是一个应用主组件；

main.js是入口文件。

### 34.**在Vue.cli中怎样使用自定义组件？在使用过程中你遇到过哪些问题？** ###

具体步骤如下。

（1）在 components目录中新建组件文件，脚本一定要导出暴露的接口（script一定要export default \{\}）。

（2）在需要用的页面（组件）中导入：

`import indexPage from '@/components/indexPage.vue'`

（3）将导入的组件注入uejs的子组件的 components属性中。

（4）在 template视图view中使用，例如有indexPage命名，使用的时候则index-page。

### 35.**如何让CSS只在当前组件中起作用？** ###

在每一个Vue.js组件中都可以定义各自的CSS、 JavaScript代码。如果希望组件内写的CSS只对当前组件起作用，只需要在Style标签添加Scoped属性，即< style scoped></ style>。

### 36.**如何实现路由嵌套？如何进行页面跳转？** ###

路由嵌套会将其他组件渲染到该组件内，而不是使整个页面跳转到 router-view定义组件渲染的位置。要进行页面跳转，就要将页面渲染到根组件内，可做如下配置。

new Vue({
    
    el：'#icketang',
    
     router:router,
    
     template：'<router-view></router-view>'
    
    })

首先，实例化根组件，在根组件中定义组件渲染容器。然后，挂载路由，当切换路由时，将会切换整个页面。

### 37.**ref属性有什么作用？** ###

有时候，为了在组件内部可以直接访问组件内部的一些元素，可以定义该属性此时可以在组件内部通过this. $refs属性，更快捷地访问设置ref属性的元素。这是一个原生的DOM元素，要使用原生 DOM API操作它们，例如以下代码。

< div id="icke">
    
    < span ref="msg">有课前端网</span>
    
    < span ref=" otherMsg">专业前端技术学习网校</span>
    
    < /div>
    
    app. $refs.msg.text Content
    
    app. $refs.otherMsg. textContent

### 38.vue.js是什么 ###

Vue. js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue.js采用自下而上增量开发的设计。Vue.js的核心库只关注视图层，并且容易学习，易于与其他库或已有项目整合。另外， Vue. js完全有能力驱动采用单文件组件以及Vue.js生态系统支持的库开发的复杂单页应用。

Vue. js的目标是通过尽可能简单的API实现响应式的数据绑定的组件开发。

### 39.**请说明组件的作用。** ###

当< keep- alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

< keep-alive>是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中。

当在< keep- alive>内切换组件时，它的 activated和 deactivated这两个生命周期钧子函数将会执行。

<keep-alive>
    
    <component :is="view"></component>
    
    </keep-alive >

### 40.axios是什么，如何使用它？ ###

axios是在vue2.0中用来替换 vue-resource.js插件的一个模块，是一个请求后台的模。

用 npm install axios安装 axios。基于 EMAScript 6 的 EMAScript Module规范，通过 import关键字将 axios导入，并添加到 Vue. js类的原型中。这样每个组件（包括vue.js实例化对象）都将继承该方法对象。它定义了get、post等方法，可以发送get或者post请求。在then方法中注册成功后的回调函数，通过箭头函数的作用域特征，可以直接访问组件实例化对象，存储返回的数据。

import Vue from ' vue' 
    
    import axios from 'axios'；
    
    Vue.prototype.$http=axios；
    
     new Vue ({
    
    el：' ickt',
    
    data：{
    
    msg：' '
    
    }，
    
    template：'<h1> { { msg } }</h1>'，
    
    created:function() {
    
    this.$http.get( 'data.json' )
    
    .then（res => {
    
    this. msg= res .data. data
    
    })
    
    }
    
    })

### 41.**sass是什么？如何在vue中安装和使用？** ###

sass是一种CSS预编译语言安装和使用步骤如下。

（1）用npm安装加载程序（ sass-loader、 css-loader等加载程序)。

（2）在 webpack. config. js中配置sass加载程序。

模块

module：{
     
    //加载程序
     
    loaders:[
     
    //加载scss 
     
    {
     
    test:/ \ .scss$ /, 
     
    loader : 'vue-style-loader！css-loader！sass-loader '
     
            }
     
          ]
     
    }

（3）在组件的 style标签中加上lang属性，例如lang=“scss”。

### 42.组件之间的传值 ###

*  父组件通过标签上`:data=data`方式定义传值
 *  子组件通过`props`方法接受数据
 *  子组件通过`$emit`方法传递参数

参考博文：

*  《[Vue进阶（六）：组件之间的数据传递][Vue]》
 *  《[Vue进阶（九十四）：自定义组件][Vue 1]》
 *  《[Vue进阶（幺零六）：子组件处理父组件异步值传递给子组件处理][Vue 2]》

### 43.webpack是什么？ ###

本质上，**webpack** 是一个用于现代 JavaScript 应用程序的 *静态模块打包工具*。当 webpack 处理应用程序时，它会在内部构建一个 [依赖图(dependency graph)][dependency graph]，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 *bundle*。

WebPack可以看做是**模块打包机**：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用

### 44.vue如何实现按需加载配合`webpack`设置 ###

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。

页面不按需加载引入方式：import home from ‘…/…/common/home.vue’

页面按需加载引入方式：

const home = r => require.ensure( \[\], () => r (require(’…/…/common/home.vue’)))

### 45.vuex有几种属性 ###

有五种，分别是 `State`、 `Getter`、`Mutation` 、`Action`、 `Module`。

**state：**

1.  Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。
2.  state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。
3.  通过mapState把全局 state 和 getters 映射到当前组件的 computed 计算属性中。

**getter：**

1.  `getters` 可以对`State`进行计算操作，它就是`Store`的计算属性。
2.  虽然在组件内也可以做计算属性，但是`getters` 可以在多组件之间复用。
3.  如果一个状态只在一个组件内使用，可以不用`getters`。

**mutation：**

`Action` 类似于 `mutation`，不同在于：`Action` 提交的是 `mutation`，而不是直接变更状态；`Action` 可以包含任意异步操作。

### 46，不用vuex会带来什么问题？ ###

*  可维护性会下降，想修改数据要维护三个地方；
 *  可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
 *  增加耦合，大量的上传派发，会让耦合性大大增加，`Vue`用`Component`本意就是为了减少耦合，现在这么用，和组件化的初衷相背。

参考博文：

*  《[Vue进阶（幺肆捌）：Vuex辅助函数详解][Vue_Vuex]》
 *  《[Vue进阶（二十七）：Vuex之getters,mapGetters,…mapGetters详解][Vue_Vuex_getters_mapGetters_mapGetters]》
 *  《[Vue进阶（四十三）：Vuex之Mutations详解][Vue_Vuex_Mutations]》
 *  《[Vue进阶（幺肆幺）：Vue计算属性computed方法内传参][Vue_Vue_computed]》

[Vue]: https://shq5785.blog.csdn.net/article/details/80210948
[Vue 1]: https://blog.csdn.net/sunhuaqiang1/article/details/104051253
[Vue 2]: https://shq5785.blog.csdn.net/article/details/105447960
[dependency graph]: https://webpack.docschina.org/concepts/dependency-graph/
[Vue_Vuex]: https://shq5785.blog.csdn.net/article/details/110957331
[Vue_Vuex_getters_mapGetters_mapGetters]: https://shq5785.blog.csdn.net/article/details/85221092
[Vue_Vuex_Mutations]: https://shq5785.blog.csdn.net/article/details/89138976
[Vue_Vue_computed]: https://shq5785.blog.csdn.net/article/details/108483901