Vue 入门之 computed 计算属性
在 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>
在这个例子中，我们有一个价格和数量的输入框，通过计算属性totalPrice实时计算出总价。当价格或数量发生变化时，总价会自动更新。
总之，computed计算属性是 Vue 中非常实用的特性，可以帮助我们更高效地处理数据的转换和派生。通过合理地使用计算属性，可以使我们的代码更加简洁、易于维护，并提高性能。希望本文对你理解和使用 Vue 的计算属性有所帮助。
原文地址：https://blog.csdn.net/dawn191228/article/details/142369317
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！