VUE面试题汇总（三）

props

_ include - 字符串或正则表达，只有匹配的组件会被缓存

_ exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

// 组件 a

export default {

name: “a”,

data() {

return {};

}

};

可以保留它的状态或避免重新渲染

可以保留它的状态或避免重新渲染

但实际项目中, 需要配合 vue-router 共同使用.

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：

如果只想 router-view 里面某个组件被缓存，怎么办？

增加 router. meta 属性

// routes 配置

export default [{

path: “/”,

name: “home”,

component: Home,

meta: {

keepAlive: true // 需要被缓存

}

},

{

path: “/:id”,

name: “edit”,

component: Edit,

meta: {

keepAlive: false // 不需要被缓存

}

}

];

23. vue 中如何编写可复用的组件？

参考答案：

总结组件的职能，什么需要外部控制（即 props 传啥），组件需要控制外部吗（$emit）, 是否需要插槽（slot）

24. 什么是 vue 生命周期和生命周期钩子函数？

参考答案：

vue 的生命周期就是 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 }}

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

  前端资料汇总

  

  我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

  首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

  更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
  找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
  最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。