【Vue】计算属性computed_过滤器filters_监听器watch

1. 计算属性（Computed Properties）

计算属性是基于它们的依赖进行缓存的响应式属性。只有当相关依赖发生改变时，计算属性才会重新求值。这意味着只要依赖没有变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。这对于执行复杂操作或需要依赖多个数据源的属性特别有用。

特点：

• 缓存性：基于它们的响应式依赖进行缓存。
• 懒执行：只有在相关响应式依赖发生改变时才会重新求值。
• 声明式描述依赖关系。

使用场景：

• 有一些数据需要基于其他数据变化而变化时。
• 需要在模板中多次引用同一个计算结果时。

示例：

computed: {  
  reversedMessage() {  
    // `this` 指向 vm 实例  
    return this.message.split('').reverse().join('');  
  }  
}

2. 过滤器（Filters）

在Vue 2.x中，过滤器用于文本格式化。它们可以被用在双花括号插值和v-bind表达式中。然而，在Vue 3.x中，官方移除了对过滤器的支持，建议使用计算属性或方法替代。

特点：

• 文本格式化。
• 可用于插值和绑定表达式。
• 在Vue 3.x中已移除，推荐使用计算属性或方法。

使用场景（Vue 2.x）：

• 当你需要在模板中格式化文本时。

示例（Vue 2.x）：

<!-- 在双花括号中 -->  
{{ message | capitalize }}  
  
<!-- 在 `v-bind` 中 -->  
<div v-bind:id="rawId | formatId"></div>

Vue 3.x替代方案：

computed: {  
  formattedMessage() {  
    return this.message.toUpperCase(); // 示例：将message转换为大写  
  }  
}

3. 监听器（Watchers）

监听器允许你执行异步操作或开销较大的操作，以响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，使用监听器是最合适的。

特点：

• 响应数据变化执行异步或开销较大的操作。
• 可以执行复杂的逻辑，不限于数据格式化。
• 可以配置为深度监听（deep: true）或立即执行（immediate: true）。

使用场景：

• 当你需要在数据变化时执行异步操作或复杂逻辑时。
• 当你需要基于数据变化执行非响应式的数据处理时。

示例：

watch: {  
  // 监听问询参数query的变化  
  query(newVal, oldVal) {  
    // 执行异步操作，如API调用  
    this.fetchData(newVal);  
  },  
  // 深度监听一个对象  
  deepObject: {  
    handler(newVal, oldVal) {  
      // 对newVal执行操作  
    },  
    deep: true // 对象内部的属性变化时也会触发  
  }  
}