Vue 入门之 computed 计算属性

文章目录

一、基础语法
二、计算属性 vs 方法
三、完整写法
四、代码样例

在 Vue 开发中，computed计算属性是一个非常强大且常用的特性。它可以帮助我们更高效地处理数据的转换和派生，使代码更加简洁和易于维护。本文将详细介绍 Vue 中computed计算属性的基础语法、与方法的对比、完整写法以及提供代码样例。

一、基础语法

computed是 Vue 实例中的一个选项，用于定义计算属性。计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时才会重新求值。

基本语法如下：

new Vue({data() {return {// 数据};},computed: {// 计算属性名computedPropertyName() {// 计算逻辑return // 返回值}}
});

在上面的代码中，我们在computed选项中定义了一个计算属性computedPropertyName，它的计算逻辑在函数内部实现，并返回计算结果。

二、计算属性 vs 方法

在 Vue 中，有时候可能会纠结是使用计算属性还是方法来处理数据转换。下面来对比一下它们的区别：

1. 语法和调用方式

计算属性：在模板中可以直接像访问普通属性一样使用计算属性，无需添加括号调用。例如：{{ computedPropertyName }}。
方法：在模板中需要添加括号调用方法，例如：{{ methodName() }}。

2. 缓存特性

计算属性：具有缓存特性，只有当它的依赖项发生变化时才会重新计算。如果依赖项没有变化，多次访问计算属性会直接返回缓存的值，提高性能。
方法：每次调用方法都会重新执行函数中的逻辑，没有缓存。

例如，下面的代码展示了使用计算属性和方法来实现相同功能的对比：

<!DOCTYPE html>
<html><head><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><!-- 使用计算属性 --><p>计算属性结果：{{ computedFullName }}</p><!-- 使用方法 --><p>方法结果：{{ fullNameMethod() }}</p></div><script>const app = Vue.createApp({data() {return {firstName: 'John',lastName: 'Doe'};},computed: {computedFullName() {return this.firstName + ' ' + this.lastName;}},methods: {fullNameMethod() {return this.firstName + ' ' + this.lastName;}}});const vm = app.mount('#app');</script>
</body></html>

在上述例子中，计算属性computedFullName和方法fullNameMethod实现了相同的功能，但计算属性在多次访问时如果依赖项没有变化，会直接返回缓存的值，而方法每次都会重新计算。

三、完整写法

计算属性除了上述的基本写法外，还可以使用对象的完整写法，这种写法可以提供更多的配置选项。

完整写法的语法如下：

new Vue({data() {return {// 数据};},computed: {computedPropertyName: {get() {// 获取计算属性值的逻辑return // 返回值},set(newValue) {// 设置计算属性值的逻辑}}}
});

在完整写法中，我们可以定义一个对象，包含get和set方法。get方法用于获取计算属性的值，set方法用于设置计算属性的值。

例如，下面的代码展示了使用完整写法的计算属性：

<!DOCTYPE html>
<html><head><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><p>全名：{{ fullName }}</p><input v-model="firstName"><input v-model="lastName"></div><script>const app = Vue.createApp({data() {return {firstName: '',lastName: ''};},computed: {fullName: {get() {return this.firstName + ' ' + this.lastName;},set(newValue) {const names = newValue.split(' ');this.firstName = names[0] || '';this.lastName = names[1] || '';}}}});const vm = app.mount('#app');</script>
</body></html>

在上述例子中，计算属性fullName使用了完整写法，通过get方法获取全名，通过set方法可以设置全名并自动更新firstName和lastName。

四、代码样例

下面是一个更复杂的代码样例，展示了如何在 Vue 应用中使用计算属性：

<!DOCTYPE html>
<html><head><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><p>价格：{{ price }}</p><p>数量：{{ quantity }}</p><p>总价：{{ totalPrice }}</p><input v-model="price"><input v-model="quantity"></div><script>const app = Vue.createApp({data() {return {price: 0,quantity: 0};},computed: {totalPrice() {return this.price * this.quantity;}}});const vm = app.mount('#app');</script>
</body></html>