从基础学起，掌握Vue响应系统中的filter、computed、watch

2024-01-30 20:44:37

在Vue.js中，响应系统是实现数据与视图同步的核心，而filter、computed、watch作为响应式编程的重要组成部分，帮助开发者高效地处理数据变化。本文将深入浅出地讲解这三个特性，让您对Vue响应系统有更清晰的认识，并轻松掌握其用法。

1. 初识Vue响应系统

Vue.js的响应系统是其核心机制之一，实现了数据与视图的自动同步。当检测到数据变化时，Vue会自动更新受影响的视图元素，而无需手动操作。这使得Vue成为构建交互式应用程序的理想选择。

2. filter：便捷数据格式化

filter是Vue提供的一种过滤器，用于格式化数据在视图中的显示方式。它可以在模板中使用，通过管道符（ | ）将数据传递给过滤器，并得到格式化后的结果。例如，可以使用date过滤器将时间戳格式化为易于阅读的日期字符串。

<p>当前日期：{{ new Date() | date('yyyy-MM-dd') }}</p>

3. computed：计算属性，缓存依赖

computed属性是一种计算属性，用于根据其他属性的值计算出一个新的属性。computed属性与普通属性的区别在于，computed属性是惰性的，只有在被访问时才会计算其值。这使得computed属性在性能方面比普通属性更具优势，尤其是当计算过程相对复杂时。

<template>
  <div>
    <p>商品名称：{{ product.name }}</p>
    <p>商品价格：{{ product.price }}</p>
    <p>商品折扣价：{{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {
        name: 'iPhone 13 Pro',
        price: 999
      }
    }
  },
  computed: {
    discountedPrice() {
      return this.product.price * 0.8;
    }
  }
}
</script>

4. watch：监听数据变化，触发回调

watch用于监听数据的变化，并在数据变化时触发回调函数。watch可以监视一个或多个数据属性，当这些属性的值发生变化时，就会执行回调函数。watch回调函数的参数是新值和旧值，开发者可以通过比较这两个值来决定如何处理数据变化。

<template>
  <div>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from "${oldValue}" to "${newValue}".`);
    }
  }
}
</script>