在Vue中，计算属性和监听属性是两种非常有用的功能，它们可以帮助我们更好地管理数据和响应数据的变化。

计算属性

计算属性是基于它们的依赖进行缓存的。只有当依赖发生变化时，计算属性才会重新计算。这使得计算属性非常适合用于执行昂贵的计算或观察多个数据源。

计算属性的两种编写方式

Vue 3提供了两种定义计算属性的方式：

1. 函数式语法：这是最常用的方式，直接返回一个计算值。

   computed: {type1() {return this.count > 10 ? "大" : "小";}
   }
   

2. 对象式语法：这种方式允许你提供一个get方法来获取值，还可以提供一个set方法来处理值的变化。

   computed: {type: {get() {return this.count > 10 ? "大" : "小";},set(newValue) {if (newValue === "大") {this.count = 11;} else {this.count = 0;}}}
   }
   

函数与计算属性的区别

函数和计算属性的主要区别在于缓存机制。计算属性是被缓存的，只有当依赖的数据变化时才会重新计算。而函数每次调用都会执行其逻辑。

例如，在上面的代码中，typeFunc是一个普通的函数，每次调用都会执行条件判断。而type和type1是计算属性，它们的结果会被缓存，只有当count变化时才会重新计算。

监听属性

监听属性，或称为watch属性，允许我们监听一个数据的变化，并在变化时执行一些操作。这在处理异步操作或需要在数据变化后执行复杂逻辑时非常有用。

watch: {searchText(newValue, oldValue) {if (newValue.length > 10) {alert("超过10个字符");this.searchText = "";}}
}

在上面的代码中，我们监听了searchText的变化。如果输入的文本超过10个字符，我们会弹出一个警告并清空输入。

实例分析

在提供的HTML代码中，我们创建了一个Vue应用，并展示了计算属性和监听属性的使用。

• type和type1都是计算属性，它们根据count的值显示“大”或“小”。
• typeFunc是一个普通的函数，每次调用都会执行条件判断。
• watch用于监听searchText的变化，如果输入超过10个字符，会弹出警告并清空输入。

在实际应用中，我们可以根据是否需要缓存结果来选择使用计算属性或函数。计算属性适合用于频繁访问且依赖数据变化的场景，而函数适合用于不需要缓存或依赖数据不明确的场景。

通过使用计算属性和监听属性，我们可以更有效地管理和响应数据的变化，使Vue应用更加高效和易于维护。