Vue 中使用 computed 和 watch 实现数据计算与监听的技巧

WBOY

发布： 2023-06-25 13:00:24

原创

3154人浏览过

vue.js 是一个流行的 javascript 前端框架，提供了丰富的数据绑定和响应式特性，让我们可以轻松管理 web 应用程序的状态。其中 computed 和 watch 是 vue.js 中两个重要的数据处理和监听工具，本篇文章将介绍如何使用它们实现数据计算与监听的技巧。

1. computed

computed 计算属性是一种依赖于其他属性值的属性，也就是说，当其他的属性值发生变化时，computed 属性会自动重新计算。computed 计算属性有两个主要的作用：

用于计算新的数据，比如显示列表项的总数或者对列表数据进行排序。
对现有数据进行处理，比如格式化日期或者金额等。

1.1 计算新数据

我们可以在 Vue 实例的 computed 对象中定义多个计算属性。计算属性返回的结果可以直接在模板中使用，而且只有当依赖的属性变化时，它才会重新计算。下面是一个例子：

<template>
  <div>
    <p>商品数量: {{ products.length }}</p>
    <ol>
      <li v-for="(product, index) in sortedProducts" :key="index">
        {{ product.name }} - ${{ product.price }}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: "iPhone 12", price: 799 },
        { name: "MacBook Air", price: 999 },
        { name: "iPad Pro", price: 699 },
        { name: "AirPods Pro", price: 249 },
      ]
    }
  },
  computed: {
    sortedProducts: function() {
      return this.products.sort((a, b) => a.price - b.price);
    }
  }
}
</script>

登录后复制

在上面的例子中，我们通过计算属性的方式对商品列表进行排序。sortedProducts 计算属性会对 products 的价格进行升序排列，然后再将排好序的结果返回给模板中的 v-for 指令进行渲染。

需要注意的是，计算属性只有在它所依赖的属性发生改变时才会被重新计算。所以，即使我们在 sortedProducts 计算属性中使用了 this.products，但是只要 products 没有发生改变，sortedProducts 就不会被重新计算。

立即学习“前端免费学习笔记（深入）”；

1.2 对现有数据进行处理

计算属性不仅可以用来计算新的数据，还可以用来对现有数据进行处理，比如格式化日期或者金额等。下面是一个例子：

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

<template>
  <div>
    <p>订单时间: {{ formattedTime }}</p>
    <button @click="updateTime">更新时间</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderTime: new Date()
    }
  },
  computed: {
    formattedTime: function() {
      return this.orderTime.toLocaleString();
    }
  },
  methods: {
    updateTime: function() {
      this.orderTime = new Date();
    }
  }
}
</script>

登录后复制

在上面的例子中，我们通过计算属性的方式将订单时间格式化为本地日期和时间字符串（toLocaleString），并将格式化后的结果展示在模板中。由于计算属性的特性，formattedTime 只有在 orderTime 改变时才会被重新计算。

2. watch

watch 是一个深度监听统一数据源的函数。与 computed 不同，watch 监听到的数据源发生变化时，并不会自动地重新渲染模板，而是需要手动地执行操作。watch 主要用于监听数据的变化，从而触发相应的操作。下面是一个例子：

<template>
  <div>
    <p>剩余字符数: {{ charsLeft }}</p>
    <textarea v-model="text" @keyup="updateChars"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    }
  },
  watch: {
    text: function(val) {
      if (val.length > 10) {
        alert("输入字符数不能超过10个!");
      }
    }
  },
  computed: {
    charsLeft: function() {
      return 10 - this.text.length;
    }
  },
  methods: {
    updateChars: function() {
      this.charsLeft = 10 - this.text.length;
    }
  }
}
</script>

登录后复制

在上面的例子中，我们通过 watch 监听输入框中的 text 变量。当 text 长度超过 10 个字符时，watch 会触发对应的操作，弹出警告框，防止用户继续输入。同时，我们通过 computed 计算属性统计剩余字符数，可以看到计算属性 charsLeft 只有在 text 改变时才会被重新计算。

需要注意的是，watch 监听的变量是一个函数，并且会接收新值和旧值两个参数。我们可以根据这两个参数执行相应的操作。watch 还提供了深度监听和立即执行等高级选项，可以根据具体需求进行配置。

3. 结语

computed 和 watch 是 Vue.js 中必不可少的工具，非常适用于对数据进行复杂的处理和监听。我们可以在 computed 中定义多个计算属性，通过依赖关系来控制计算顺序和更新方式。而在 watch 中，我们可以对数据源进行深度监听，并实时响应数据源的变化。虽然 computed 和 watch 有一定的学习和使用成本，但是这些成本的提高将会帮助您构建更加灵活和高效的 Vue 应用程序。

以上就是Vue 中使用 computed 和 watch 实现数据计算与监听的技巧的详细内容，更多请关注php中文网其它相关文章！