Vue面试宝典（在更新）

自测Vue掌握程度

欢迎阅读，如有问题可在评论中提出，后续会更新🤓

0.说说对Vue的理解

待完善答案

1.什么是MVVM？

待完善答案

2.谈谈对v-model的理解

待完善答案

3.v-if和v-show有什么区别？

v-if是真正的条件渲染，因为它在切换的过程中被包裹着的元素会销毁和重建，但是它也是惰性的，如果初始的时候渲染条件是false，就什么都不做，直到条件变为true的时候才开始渲染。
v-show类似于css的display属性进行切换一样，不管初始条件是什么，元素都会被渲染。
当很少改变条件时，不需要频繁的切换条件时可以使用v-if，否则使用v-show。

4.Vue的生命周期

详见Vue文档Vue生命周期

5.Computed与Watch的区别？

computed: 计算属性，只有它依赖的属性值改变计算属性才会发生变化，并且计算属性是有缓存的，等到下一次依赖的值改变才会重新计算。
**watch:**监听，类似于监听回调事件，每当监听的数据发生变化时都会执行回调进行后续的操作。
**场景：**当需要数值计算并且依赖其他的值时，可以使用计算属性因为计算属性有缓存特性，避免每次获取值都要重新计算。 当我们需要数据变化时执行异步或开销比较大的操作时，可以使用watch，watch选项允许我们执行异步操作并且限制我们执行该操作的频率，在得到最终的结果之前，设置中间态等等。

6.Class与Style动态绑定

6.1.class使用对象

// class active-class是否生效取决于isActive的值
// class red-class是否生效取决于isError的值
<div v-bind:class="{ active-class: isActive, 'red-class': 'isError'}"></div>

data: {
	isActive: true,
	isError: false
}

6.2.class使用数组

// 可以通过数组的方式给定义好的变量
<div v-bind:class="[ isActive ? activeClass :'notActivelass', 'errorClass']"></div>

data: {
	isActive: true,
	activeClass: 'active-class',
	notActivelass: 'not-active-class',
	errorClass: 'red-class'
}

6.3.style使用对象

<div v-bind:style="{ color: activeColor, font-size: fontSize + 'px'}"></div>

data: {
	activeColor: '#ff0000',
	fontSize: 30
}

6.4.style使用数组

<div v-bind:style="[colorStyle, sizeStyle]"></div>

data: {
	colorStyle: {
		color: '#ff0000'
	},
	sizeStyle: {
		'font-size': '20px'
	}
}