往期点这里：↓
VUE面试题汇总（一）
VUE面试题汇总（二）
21. vue 中父组件调用子组件的方法
参考答案：
使用$refs
解析：
父组件
<template>
<div>
<button @click="clickParent">点击</button>
<child ref="mychild"></child>
</div>
</template>
<script>javascript">
import Child from "./child";
export default {
name: "parent",
components: {
child: Child
},
methods: {
clickParent() {
this.$refs.mychild.parentHandleclick("嘿嘿嘿"); // 划重点！！！！
}
}
};
</script>
子组件
<template>
<div>
child
</div>
</template>
<script>javascript">
export default {
name: "child",
props: "someprops",
methods: {
parentHandleclick(e) {
console.log(e);
}
}
};
</script>
22. vue 中 keep-alive 组件的作用
参考答案：
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
解析：
用法也很简单：
<keep-alive>
<component>
<!-- 该组件将被缓存！ -->
</component>
</keep-alive>
props
_ include - 字符串或正则表达，只有匹配的组件会被缓存
_ exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
// 组件 a
export default {
name: "a",
data() {
return {};
}
};
<keep-alive include="a">
<component>
<!-- name 为 a 的组件将被缓存！ -->
</component>
</keep-alive>可以保留它的状态或避免重新渲染
<keep-alive exclude="a">
<component>
<!-- 除了 name 为 a 的组件都将被缓存！ -->
</component>
</keep-alive>可以保留它的状态或避免重新渲染
但实际项目中, 需要配合 vue-router 共同使用.
router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：
<keep-alive>
<router-view>
<!-- 所有路径匹配到的视图组件都会被缓存！ -->
</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 // 不需要被缓存
}
}
];
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件，比如 Home！ -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>
23. vue 中如何编写可复用的组件？
参考答案：
总结组件的职能，什么需要外部控制（即 props 传啥），组件需要控制外部吗（$emit）, 是否需要插槽（slot）
24. 什么是 vue 生命周期和生命周期钩子函数？
参考答案：
解析：
25. vue 生命周期钩子函数有哪些？
参考答案：
26. vue 如何监听键盘事件中的按键？
参考答案：
解析：参考
27. vue 更新数组时触发视图更新的方法
参考答案：
- Vue. set 可以设置对象或数组的值，通过 key 或数组索引，可以触发视图更新
数组修改
Vue.set(array, indexOfItem, newValue)
this.array.$set(indexOfItem, newValue)
对象修改
Vue.set(obj, keyOfItem, newValue)
this.obj.$set(keyOfItem, newValue)
- Vue. delete 删除对象或数组中元素，通过 key 或数组索引，可以触发视图更新
数组修改
Vue.delete(array, indexOfItem)
this.array.$delete(indexOfItem)
对象修改
Vue.delete(obj, keyOfItem)
this.obj.$delete(keyOfItem)
- 数组对象直接修改属性，可以触发视图更新
this.array[0].show = true;
this.array.forEach(function(item){
item.show = true;
});
- splice 方法修改数组，可以触发视图更新
this.array.splice(indexOfItem, 1, newElement)
- 数组整体修改，可以触发视图更新
var tempArray = this.array;
tempArray[0].show = true;
this.array = tempArray;
- 用 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})
- Vue 提供了如下的数组的变异方法，可以触发视图更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
28. vue 中对象更改检测的注意事项
参考答案：
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
javascript">var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：
javascript">var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
你可以添加一个新的 age 属性到嵌套的 userProfile 对象：
javascript">Vue.set(vm.userProfile, 'age', 27)
你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
javascript">vm.$set(vm.userProfile, 'age', 27)
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：
javascript">Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你应该这样做：
javascript">vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue对象更改检测注意事项例子</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button @click="add()">添加</button>
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>
<script>javascript">
new Vue({
el:"#app",
data:{
items:{
name:"daming"
}
},
methods:{
add(){
Vue.set(this.items,'age', 20);
//this.$set(this.items,"age",20); 两者是等价的
}
}
})
</script>
</body>
</html>
可以同时添加多个属性如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue对象更改检测注意事项例子</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button @click="add()">添加</button>
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>
<script>javascript">
new Vue({
el:"#app",
data:{
items:{
name:"daming"
}
},
methods:{
add(){
this.items = Object.assign({},this.items,{
age:20,
sex:"male"
})
}
}
})
</script>
</body>
</html>
29. 解决非工程化项目初始化页面闪动问题
参考答案：
vue页面在加载的时候闪烁花括号{}}，v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕
//css样式
[v-cloak] {
display: none;
}
//html代码
<div id="app" v-cloak>
<ul>
<li v-for="item in tabs">{{item.text}}</li>
</ul>
</div>
30. v-for 产生的列表，实现 active 的切换
参考答案：
:class
v-for生成序列
<ul>
<li v-for="(info,index) in list" :key="info.id" @click="select(index)" v-bind:class="{'active':info.active}">{{info.name}}</li>
</ul>
data数据
javascript">list:[
{
name:'a',
id:1,
active:false
},
{
name:'b',
id:2,
active:false
},
{
name:'c',
id:3,
active:false
},
{
name:'d',
id:4,
active:false
},
]
点击事件
javascript">select(d){
this.list.map(s=>s.active=false);
this.list[d].active=true;
},
CSS样式
<style scoped>
li.active{
background-color: red;
}
