Vue 高频面试题总结03 内附答案

1、computed 中的属性名和 data 中的属性名可以相同吗？

不能同名，因为不管是 computed 属性名还是 data 数据名还是 props 数据名都会被挂载在 vm 实例上，因此这三个都不能同名。

2、什么是 Vue 的计算属性

计算属性作用 ： 解决复杂逻辑数据渲染问题

• 某些数据在渲染的时候，可能要经过一些复杂逻辑的计算处理

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式, 解决复杂逻辑数据渲染问题

1. 依赖于数据，数据更新，处理结果自动更新；

2. 计算属性内部 this 指向 vm 实例；

3. 在 template 调用时，直接写计算属性名即可；

4. 常用的是 getter 方法，获取数据，也可以使用 set 方法改变数据；

5. 相较于 methods，不管依赖的数据变不变，methods 都会重新计算，但是依赖数据不变的时候 computed 从缓存中获取，不会重新计算。

3、Vue 中 key 值的作用是什么？

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

key 的作用主要是为了高效的更新虚拟 DOM

4、Vue-loader 是什么？使用它的用途有哪些？

Vue-loader 会解析文件，提取出每个语言块，如果有必要会通过其他 loader处理，最后将他们组装成一个 commonjs 模块；module.exports 出一个 Vue.js 组件对象

5、Vue 中怎么自定义过滤器

可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值。

6、你是怎么认识 Vuex 的?

Vuex 可以理解为一种开发模式或框架。通过状态(数据源)集中管理驱动组件的变化

1、 应用级的状态集中放在 store 中;

2、 改变状态的方式是提交 mutations，这里必须是同步的;

3、 异步逻辑应该封装在 action 中。

7、Vuex 的 5 个核心属性是什么?

State、 Getter、Mutation 、Action、 Module

1）state

state 为单一状态树，在 state 中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在 Vue.js 的组件中才能获取你定义的这个对象的状态。

2）getter

getter 类似 Vue.js 的计算属性，当我们需要从 store 的 state中派生出一些状态，那么我们就需要使用 getter，getter 会接收 state 作为第一个参数，而且 getter 的返回值会根据它的依赖被缓存起来，只有 getter 中的依赖值发生改变的时候才会被重新计算。

3）mutation

更改 store 中 state 状态的唯一方法就是提交 mutation，就很类似事件。每个 mutation 都有一个字符串类型的事件类型和一个回调函数，我们需要改变 state 的值就要在回调函数中改变。调用方法：store.commit。

4）action

action 可以提交 mutation，在 action 中可以执行 store.commit，而且 action 中可以有任何的异步操作。调用方法：store.dispatch

5）module

module 其实只是解决了当 state 中很复杂臃肿的时候，module 可以将 store 分割成模块，每个模块中拥有自己的 state、mutation、action和 getter

8、Vuex 的出现解决了什么问题?

1. 多个组件共享状态时，单向数据流的简洁性很容易被破坏

2. 多个视图依赖于同一状态。

3. 来自不同视图的行为需要变更同一状态

9、简述 Vuex 的数据传递流程

当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法中都会有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变

10、Vuex 的 Mutation 和 Action 之间的区别是什么？

1）流程顺序

“相应视图—>修改 State”拆分成两部分，视图触发 Action，Action 再触发Mutation。

2）角色定位

Mutation：专注于修改 State，理论上是修改 State 的唯一途径。

Action：业务代码、异步请求。

3）限制

Mutation：必须同步执行。

Action：可以异步，但不能直接操作 State。