VUE面试题汇总（三）

25. vue 生命周期钩子函数有哪些？

参考答案：

26. vue 如何监听键盘事件中的按键？

参考答案：

解析：参考

27. vue 更新数组时触发视图更新的方法

参考答案：

1. Vue. set 可以设置对象或数组的值，通过 key 或数组索引，可以触发视图更新

数组修改

Vue.set(array, indexOfItem, newValue)

this.array.$set(indexOfItem, newValue)

对象修改

Vue.set(obj, keyOfItem, newValue)

this.obj.$set(keyOfItem, newValue)

2. Vue. delete 删除对象或数组中元素，通过 key 或数组索引，可以触发视图更新

数组修改

Vue.delete(array, indexOfItem)

this.array.$delete(indexOfItem)

对象修改

Vue.delete(obj, keyOfItem)

this.obj.$delete(keyOfItem)

3. 数组对象直接修改属性，可以触发视图更新

this.array[0].show = true;

this.array.forEach(function(item){

item.show = true;

});

4. splice 方法修改数组，可以触发视图更新

this.array.splice(indexOfItem, 1, newElement)

5. 数组整体修改，可以触发视图更新

var tempArray = this.array;

tempArray[0].show = true;

this.array = tempArray;

6. 用 Object. assign 或 lodash. assign 可以为对象添加响应式属性，可以触发视图更新

//Object.assign的单层的覆盖前面的属性，不会递归的合并属性

this.obj = Object.assign({},this.obj,{a:1, b:2})

//assign与Object.assign一样

this.obj = _.assign({},this.obj,{a:1, b:2})

//merge会递归的合并属性

this.obj = _.merge({},this.obj,{a:1, b:2})

7. Vue 提供了如下的数组的变异方法，可以触发视图更新

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

28. vue 中对象更改检测的注意事项

参考答案：

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({

data: {

a: 1

}

})

// vm.a 现在是响应式的

vm.b = 2

// vm.b 不是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({

data: {

userProfile: {

name: ‘Anika’

}

}

})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, ‘age’, 27)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

vm.$set(vm.userProfile, ‘age’, 27)

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {

age: 27,

favoriteColor: ‘Vue Green’

})

你应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {

age: 27,

favoriteColor: ‘Vue Green’

})

例子：

<button @click=“add()”>添加

• {{ item }}

  可以同时添加多个属性如下：

  <button @click=“add()”>添加

• {{ item }}

  29. 解决非工程化项目初始化页面闪动问题

  参考答案：

  vue页面在加载的时候闪烁花括号{}}，v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕

  //css样式

  [v-cloak] {

  display: none;

  }

  //html代码
• {{item.text}}

• 30. v-for 产生的列表，实现 active 的切换

  参考答案：

  :class

  v-for生成序列

  data数据

  list:[

  {

  name:‘a’,

  id:1,

  active:false

  },

  {

  name:‘b’,

  id:2,

  active:false

  },

  {

  name:‘c’,

  id:3,

  active:false

  总结

  面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

  还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

  万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  前端面试题汇总

  

  JavaScript

  

  前端资料汇总