vue-计算属性

介绍：

在JavaScript中，计算属性（Computed Property）是一种特殊类型的属性，其值是根据其他属性的值动态计算出来的。计算属性的名称通常以方括号 [] 包围，并且它们的值是根据一个或多个其他属性的值计算得出的。

1. 本质：

计算属性本质上是一个函数，它通过get方法来获取值。计算属性的值会被缓存，只有相关依赖发生变化时，才会重新计算。
使用方式和data中的普通属性相同。

2. 使用场景：

动态计算属性值：当需要根据其他属性的值动态计算属性值时，可以使用计算属性。例如，根据两个数字属性计算出它们的和或差。
缓存计算结果：计算属性可以缓存计算结果，只有当依赖的属性值发生变化时才会重新计算属性值，这可以提高性能。

3. 案例：

计算属性的完整写法详见：4. 计算属性的完整写法

<template><div><p>商品价格: {{ formattedPrice }}</p><p>商品数量: {{ quantity }}</p><p>总价: {{ totalPrice }}</p></div>
</template><script>
export default {data() {return {price: 20,       // 商品单价quantity: 3      // 商品数量};},computed: {// 计算商品价格的计算属性formattedPrice() {return `$${this.price.toFixed(2)}`;},// 计算总价的计算属性totalPrice() {return this.price * this.quantity;}}
};
</script>

解析：

formattedPrice 和 totalPrice 都是计算属性。
formattedPrice 用于格式化商品价格，totalPrice 计算总价。
这两个计算属性的值都是基于 price 和 quantity 这两个数据属性计算而来的。
每当 price 或 quantity 发生变化时，相关的计算属性会重新计算，确保显示的信息是最新的。

4. 计算属性的完整写法

在Vue中，计算属性不仅可以使用 get() 方法来定义计算逻辑，还可以使用 set() 方法来定义当计算属性被赋值时触发的逻辑。完整的计算属性写法如下：

computed: {  // 计算属性名: 包含get()和set()方法的对象  computedProperty: {  get() {  // 计算逻辑（只读）  return result;  },  set(newValue) {  // 赋值逻辑  // ...  }  }  
}

5. 完整写法案例

方法来定义当计算属性被赋值时触发的逻辑。完整的计算属性写法如下：

<body><div id="app">姓：<input type="text" v-model="firstName"><br>名：<input type="text" v-model="lastName"><br><p>姓名：{{ username }}</p><button @click="updateUserName('静静')">修改姓名</button></div><script src="./vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: '',lastName: ''},computed: {username: {// 获取方法get() { return this.firstName + this.lastName},// 设置方法set(value) { if (value.trim() !== '') {// 给姓赋值this.firstName = value.slice(0, 1)this.lastName = value.slice(1)}}}},methods: {// 修改updateUserName(newUsername) {this.username = newUsername;}}})</script>
</body>