拉勾教育前端面试题之vue常见问题答疑

vue是一套用于构建用户界面的渐进式JavaScript框架，也是初创项目的前端框架。很多企业在招聘前端工程师时都会考察其对vue的了解，拉勾IT课小编为大家分析，vue的技术知识点。

1、如何watch一个对象内部的变化？
如果只是obj内的某一个属性变化，可以直接obj.key进行。

watch: {
  'obj.question': function (newQuestion, oldQuestion) {
    this.answer = 'Waiting for you to stop typing...'
    this.debouncedGetAnswer()
  }
}

如果对整个obj深层
watch: {
  obj: {
    handler: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    },
    deep: true,
    immediate: true
  }
}
immediate的作用：当值次进行绑定的时候并不会触发watch，使用immediate则可以在初绑定的时候执行。

2、v-for循环时为什么要加key？
vue的DOM渲染是虚拟DOM，数据发生变化时，diff算法会只比较更改的部分，如果数据项的顺序被改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

3、$nextTick有什么作用？
有些时候在改变数据后立即要对DOM进行操作，此时获取到的DOM仍是获取到的是数据刷新前的DOM，无法满足需要，这个时候就用到了$nextTick。

4、vue中的$set有什么用？
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为vue无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')。

5、组件间的传值方式有哪些？
1）provide / inject
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
2）Vue.observable
让一个对象可响应。vue内部会用它来处理 data 函数返回的对象。
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为小化的跨组件状态存储器，用于简单的场景。
3）$attrs
包含了父作用域中不作为prop被识别 (且获取) 的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
4）$listeners
包含了父作用域中的 (不含.native修饰器的) v-on事件器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
5）props
6）$emit
7）eventbus
8）vuex
9）$parent/$children/ref

6、vue生命周期函数有哪些？
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
Destroyed

通过灵活的在线学习，不断提升个人的技术知识点，通过每一个细节，掌握其核心技术，特别是前端的框架知识，很多用户都不断学习，增强前端开发的技术水准，在渠道技术开发过程中，框架知识是核心。