Vue 之 computed 计算属性的理解与实践，新手小白也能快速上手
2023-12-18 10:35:47
前言
大家好，欢迎阅读本篇 Vue 之 computed 计算属性的理解与实践。computed 是 Vue 中一个非常重要的概念，掌握它可以帮助我们编写更优雅、高效的代码。在本文中，我们将从基本概念开始，逐步深入了解 computed 的使用方法，并通过一些实际的例子来展示如何使用 computed 来解决常见的问题。
何为 computed 计算属性？
computed 计算属性是 Vue 提供的一种特殊的属性，它允许我们在组件中定义一些计算后的属性。这些属性的值会根据组件中其他数据的变化而自动更新，而无需手动调用任何方法。
computed 的基本用法
基本用法 一
// 组件代码
export default {
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
};
在上面的例子中，我们定义了一个名为 fullName 的 computed 属性。这个属性的值是 firstName 和 lastName 属性的拼接。当 firstName 或 lastName 属性发生变化时，fullName 属性的值也会自动更新。
基本用法 二
// 组件代码
export default {
computed: {
fullName() {
return this.firstName.toUpperCase() + ' ' + this.lastName.toUpperCase();
}
}
};
在上面的例子中，我们使用了一个箭头函数来定义 fullName 属性。这种写法更加简洁，并且可以避免使用 return 。
基本用法 三
// 组件代码
export default {
computed: {
fullName() {
return this.$store.getters.getFullName;
}
}
};
在上面的例子中，我们使用 $store 对象访问了 Vuex 存储中的 getFullName getter。这允许我们轻松地将 Vuex 中的数据映射到组件的 computed 属性。
基本用法 四
// 组件代码
export default {
computed: {
fullName() {
if (this.firstName && this.lastName) {
return this.firstName + ' ' + this.lastName;
} else {
return '';
}
}
}
};
在上面的例子中，我们使用了一个 if 语句来处理特殊情况。当 firstName 或 lastName 为空时，fullName 属性的值为空字符串。
computed 的进阶用法
配合 vuex 使用
computed 计算属性可以与 Vuex 很好的配合使用。我们可以将 Vuex 中的数据映射到组件的 computed 属性，从而方便地访问和使用这些数据。
// 组件代码
export default {
computed: {
...mapState(['fullName']),
}
};
在上面的例子中，我们使用 mapState 方法将 Vuex 存储中的 fullName getter 映射到组件的 computed 属性。现在，我们可以在组件中直接使用 fullName 属性，而无需手动调用 $store 对象。
还想写一些其他的属性
除了上述的基本用法和进阶用法之外，computed 计算属性还有很多其他的用法。例如，我们可以使用 computed 计算属性来：
- 过滤数据
- 排序数据
- 格式化数据
- 计算统计数据
- 生成唯一的 ID
- ...
computed 的使用注意事项
在使用 computed 计算属性时，需要注意以下几点：
- computed 计算属性是惰性的，这意味着它只会在第一次被访问时计算其值。之后，它的值会被缓存起来，直到它所依赖的数据发生变化。
- computed 计算属性不能被直接修改。如果需要修改 computed 计算属性的值，需要通过修改它所依赖的数据来实现。
- computed 计算属性可以被 watch 侦听。当 computed 计算属性的值发生变化时，watch 侦听器将会被触发。
结语
以上就是关于 Vue 之 computed 计算属性的理解与实践的全部内容。希望本文对大家有所帮助。如果您有任何问题或建议，欢迎在评论区留言。
