Vue 中级面试必备知识（一）
2023-09-21 16:54:44
前言
随着Vue.js的不断发展和成熟，它已经成为众多前端开发者的首选框架之一。Vue.js不仅提供了丰富的功能和特性，而且具有出色的性能和灵活性。因此，在面试中，对于Vue.js的掌握程度往往是考察的一个重点。
本文将详细介绍Vue中级面试必备知识，包括computed和watch的区别、为什么需要使用Vue.set以及Vuex的使用方式。
正文
1. computed 和 watch 的区别
computed 和 watch 都是Vue.js中非常有用的特性，但它们有着不同的使用场景和实现方式。
computed
computed 是一个计算属性，它允许你根据其他属性的值来计算一个新的值。computed 属性的计算结果是缓存的，这意味着只有当依赖的属性发生变化时，computed 属性的值才会重新计算。
例如，以下代码定义了一个计算属性，用于计算两个输入框的和：
export default {
computed: {
sum() {
return this.num1 + this.num2;
},
},
};
watch
watch 是一个侦听属性，它允许你监听一个或多个属性的变化，并在属性发生变化时执行相应的回调函数。
例如，以下代码定义了一个侦听属性，用于在输入框的值发生变化时打印一条消息：
export default {
watch: {
num1(val, oldVal) {
console.log('The value of num1 has changed from', oldVal, 'to', val);
},
},
};
区别
computed 和 watch 的主要区别在于：
- computed 是一个计算属性，它根据其他属性的值来计算一个新的值，而 watch 是一个侦听属性，它监听一个或多个属性的变化。
- computed 的计算结果是缓存的，这意味着只有当依赖的属性发生变化时，computed 属性的值才会重新计算，而 watch 的回调函数会在属性发生变化时立即执行。
2. 为什么需要使用 Vue.set
在Vue.js中，如果你想要动态地修改一个对象的属性，你需要使用 Vue.set 方法。这是因为Vue.js使用数据劫持来跟踪对象的变化，如果你直接修改对象的属性，Vue.js将无法检测到这些变化，导致视图不会更新。
例如，以下代码将不会更新视图：
this.obj.prop = 'new value';
为了正确地更新视图，你需要使用 Vue.set 方法：
Vue.set(this.obj, 'prop', 'new value');
3. Vuex 的使用方式
Vuex 是一个状态管理库，它可以帮助你管理应用程序中的状态。Vuex 使用一个单一的全局状态树，并提供了一些方法来修改这个状态树。
安装 Vuex
首先，你需要在你的项目中安装 Vuex：
npm install vuex
然后，你需要在你的 Vue.js 应用中导入 Vuex：
import Vuex from 'vuex';
创建 Vuex 实例
接下来，你需要创建一个 Vuex 实例：
const store = new Vuex.Store({
state: {
// 你的状态对象
},
mutations: {
// 你的突变对象
},
actions: {
// 你的动作对象
},
});
使用 Vuex
你可以通过以下方式使用 Vuex：
- 在组件中使用
mapState和mapMutations将状态和突变映射到组件的计算属性和方法中。 - 在组件中使用
mapActions将动作映射到组件的方法中。 - 在组件中使用
dispatch和commit来派发动作和提交突变。
总结
本文详细介绍了Vue中级面试必备知识，包括computed 和 watch 的区别、为什么需要使用 Vue.set 以及 Vuex 的使用方式。
希望本文能对你有所帮助，祝你在Vue.js面试中取得优异的成绩！
