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 更新
})
发表回复