Vue.js 面试

1.v-show 与 v-if 区别

v-show 只是 CSS 级别的 display: none; 和 display: block; 之间的切换，而 v-if 决定是否会选择代码块的内容（或组件）。频繁操作时，使用 v-show，一次性渲染完的，使用 v-if。因为当 v-if=“false” 时，内部组件是不会渲染的，所以在特定条件才渲染部分组件（或内容）时，可以先将条件设置为 false，需要时（或异步，比如 $nextTick）再设置为 true，这样可以优先渲染重要的其它内容，合理利用，可以进行性能优化。

2.计算属性和 watch 的区别

计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。

所以区别来源于用法，只是需要动态值，那就用计算属性；需要知道值的改变后执行业务逻辑，才用 watch，用反或混用虽然可行，但都是不正确的用法。

computed 是一个对象时，它有哪些选项？

computed 和 methods 有什么区别？

computed 是否能依赖其它组件的数据？

watch 是一个对象时，它有哪些选项？

问题 1，有 get 和 set 两个选项。

问题 2，methods 是一个方法，它可以接受参数，而 computed 不能；computed 是可以缓存的，methods 不会；一般在 v-for 里，需要根据当前项动态绑定值时，只能用 methods 而不能用 computed，因为 computed 不能传参。

问题 3，computed 可以依赖其它 computed，甚至是其它组件的 data。

问题 4，
handler 执行的函数
deep 是否深度
immediate 是否立即执行
事件修饰符

怎样给这个自定义组件 custom-component 绑定一个原生的 click 事件？

<custom-component @click=“xxx”>，就已经错了，说明它对这个没有概念。这里的 @click 是自定义事件 click，并不是原生事件 click。绑定原生的 click 是这样的：

<custom-component @click.native=“xxx”>内容

.exact 是 Vue.js 2.5.0 新加的，它允许你控制由精确的系统修饰符组合触发的事件，比如：

<button @click.ctrl=“onClick”>A

<button @click.ctrl.exact=“onCtrlClick”>A

<button @click.exact=“onClick”>A

你可能还需要了解常用的几个事件修饰符：

.stop
.prevent
.capture
.self
而且，事件修饰符在连用时，是有先后顺序的。

3.组件中 data 为什么是函数

为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？

因为组件是用来复用的，JS 里对象是引用关系，这样作用域没有隔离，而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

4.keep-alive 的理解

就是把一个组件的编译缓存起来。

5.自定义组件的语法糖 v-model 是怎样实现的

这里的 v-model，并不是给普通输入框 用的那种 v-model，而是在自定义组件上使用。

这个组件中，只有一个 props，但是名字叫 value，内部还有一个 currentValue，当改变 currentValue 时，会触发一个自定义事件 @input，并把 currentValue 的值返回。这就是一个 v-model 的语法糖，它要求 props 有一个叫 value 的项，同时触发的自定义事件必须叫 input。这样就可以在自定义组件上用 v-model 了：

6.Vuex 中 mutations 和 actions 的区别

主要的区别是，actions 可以执行异步。actions 是调用 mutations，而 mutations 来修改 store。

7.怎样理解单向数据流

这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的，但是这个 prop 只能由父组件修改，子组件不能修改，否则会报错。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

一般来说，对于子组件想要更改父组件状态的场景，可以有两种方案：

在子组件的 data 中拷贝一份 prop，data 是可以修改的，但 prop 不能：

export default {
props: {
value: String
},
data () {
return {
currentValue: this.value
}
}
}

如果是对 prop 值的转换，可以使用计算属性：

export default {
props: [‘size’],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase();
}
}
}

8.生命周期

Vue.js 生命周期 主要有 8 个阶段：

创建前 / 后（beforeCreate / created）：在 beforeCreate 阶段，Vue 实例的挂载元素 el 和数据对象 data 都为 undefined，还未初始化。在 created 阶段，Vue 实例的数据对象 data 有了，el 还没有。

载入前 / 后（beforeMount / mounted）：在 beforeMount 阶段，Vue 实例的 $el 和 data 都初始化了，但还是挂载之前为虚拟的 DOM 节点，data 尚未替换。在 mounted 阶段，Vue 实例挂载完成，data 成功渲染。

更新前 / 后（beforeUpdate / updated）：当 data 变化时，会触发 beforeUpdate 和 updated 方法。这两个不常用，且不推荐使用。

销毁前 / 后（beforeDestroy / destroyed）：beforeDestroy 是在 Vue 实例销毁前触发，一般在这里要通过 removeEventListener 解除手动绑定的事件。实例销毁后，触发 destroyed。

9.组件间通信

父子通信：父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链/子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject API。

兄弟通信：Bus；Vuex；

10.路由的跳转方式

一般有两种：

通过 ，router-link 标签会渲染为 标签，在 template 中的跳转都是用这种；

另一种是编程式导航，也就是通过 JS 跳转，比如 router.push(’/home’)。

11.Vue.js 2.x 双向绑定原理

通过 Object.defineProperty() 来劫持各个属性的 setter / getter，在数据变动时发布消息给订阅者，触发相应的监听回调，这也是为什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API，且无法通过 polyfill 实现）。

12.什么是 MVVM，与 MVC 有什么区别

MVVM 模式是由经典的软件架构 MVC 衍生来的。当 View（视图层）变化时，会自动更新到 ViewModel（视图模型），反之亦然。View 和 ViewModel 之间通过双向绑定（data-binding）建立联系。与 MVC 不同的是，它没有 Controller 层，而是演变为 ViewModel。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作是由 Vue.js 完成的，我们不需要手动操作 DOM，只需要维护好数据状态。