共计 2669 个字符，预计需要花费 7 分钟才能阅读完成。
VUE 面试题
v-show 与 v-if 区别
动态绑定 class 的方法
计算属性和 watch 的区别
怎样理解单向数据流
keep-alive
自定义组件的语法糖 v-model 是怎样实现的
生命周期
组件通信
路由跳转
vue-router 有哪几种导航钩子
Vue.js 2.x 双向绑定原理
什么是 MVVM，与 MVC 有什么区别
vuex
this.$nextTick()
v-show 与 v-if 区别
v-hsow 和 v -if 的区别：v-show 是 css 切换，v-if 是完整的销毁和重新创建。
使用频繁切换时用 v -show，运行时较少改变时用 v -if
v-if=‘false’v-if 是条件渲染，当 false 的时候不会渲染
绑定 class 的数组用法
对象方法 v-bind:class=”{‘orange’: isRipe, ‘green’: isNotRipe}”
数组方法 v -bind:class=”[class1, class2]”
行内 v-bind:style=”{color: color, fontSize: fontSize+’px’}”
计算属性和 watch 的区别
计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。所以区别来源于用法，只是需要动态值，那就用计算属性；需要知道值的改变后执行业务逻辑，才用 watch，用反或混用虽然可行，但都是不正确的用法。说出一下区别会加分 computed 是一个对象时，它有哪些选项？computed 和 methods 有什么区别？computed 是否能依赖其它组件的数据？watch 是一个对象时，它有哪些选项？
有 get 和 set 两个选项
2.methods 是一个方法，它可以接受参数，而 computed 不能，computed 是可以缓存的，methods 不会。3.computed 可以依赖其他 computed，甚至是其他组件的 data4.watch 配置 handlerdeep 是否深度 immeditate 是否立即执行
总结
当有一些数据需要随着另外一些数据变化时，建议使用 computed。当有一个通用的响应数据变化的时候，要执行一些业务逻辑或异步操作的时候建议使用 watcher
事件修饰符
绑定一个原生的 click 事件，加 native，
其他事件修饰符
stop prevent self
组合键
click.ctrl.exact 只有 ctrl 被按下的时候才触发
组件中 data 为什么是函数
为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？
因为组件是用来复用的，JS 里对象是引用关系，这样作用域没有隔离，而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。
keep-alive
https://cn.vuejs.org/v2/guide…
自定义组件的语法糖 v-model 是怎样实现的
https://www.cnblogs.com/attac… 根据官方文档介绍，v-model 本质上就是语法糖，即利用 v -model 绑定数据后，其实就是既绑定了数据，又添加了一个 input 事件监听，如下：
Render 函数
怎样理解单向数据流
这个概念出现在组件通信。父组件是通过 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();
}
}
}
生命周期
创建前后 beforeCreate/created
在 beforeCreate 阶段，vue 实例的挂载元素 el 和数据对象 data 都为 undefined，还未初始化。在 created 阶段，vue 实例的数据对象有了，el 还没有。
载入前后 beforeMount/mounted
在 beforeMount 阶段，vue 实例的 $el 和 data 都初始化了，但还是挂载之前未虚拟的 DOM 节点，data 尚未替换。在 mounted 阶段，vue 实例挂载完成，data 成功渲染。
更新前后 beforeUpdate/updated
当 data 变化时，会触发 beforeUpdate 和 updated 方法。这两个不常用，不推荐使用。
销毁前后 beforeDestory/destoryed
beforeDestory 是在 vue 实例销毁前触发，一般在这里要通过 removeEventListener 解除手动绑定的事件。实例销毁后，触发的 destroyed。
组件间的通信
父子 props/event $parent/$children ref provide/inject
兄弟 bus vuex
跨级 bus vuex provide.inject
路由的跳转方式
一般有两种
<router-link to=’home’> router-link 标签会渲染为 <a> 标签，咋填 template 中的跳转都是这种；
另一种是编程是导航 也就是通过 js 跳转 比如 router.push(‘/home’)
Vue.js 2.x 双向绑定原理
这个问题几乎是面试必问的，回答也是有深有浅。基本上要知道核心的 API 是通过 Object.defineProperty() 来劫持各个属性的 setter / getter，在数据变动时发布消息给订阅者，触发相应的监听回调，这也是为什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API，且无法通过 polyfill 实现）。https://cn.vuejs.org/v2/guide…
什么是 MVVM，与 MVC 有什么区别
http://www.ruanyifeng.com/blo…
nextTick()
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后，立即使用这个回调函数，获取更新后的 DOM。
// 修改数据
vm.msg = ‘Hello’
// DOM 还未更新
Vue.nextTick(function () {
// DOM 更新
})
