知识篇：（十一）Vue2 中的计算属性与监听属性：轻松管理你的数据变化

最新推荐文章于 2026-06-26 17:09:08 发布

原创最新推荐文章于 2026-06-26 17:09:08 发布 · 1.5k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

vue

前端

知识分享

Vue2 中的计算属性与监听属性：轻松管理你的数据变化

在 Vue2 开发中，你可能会经常遇到一些场景：数据变了，需要立刻做些处理；或者多个属性依赖同一个值的变化，想自动更新。这时候，Vue 提供了两个非常有用的工具——计算属性（computed）和监听属性（watch）。它们就像是 Vue 中的“特工”，专门处理数据变化，帮你把业务逻辑打理得井井有条。

今天，我们就来聊聊 Vue2 中的计算属性和监听属性，看它们各自的用法、优劣，以及适用的场景。

1. 什么是计算属性（`computed`）？

计算属性可以理解为一种基于其他数据计算出来的属性。它不需要你手动修改，只要它依赖的任何数据发生变化，计算属性就会自动更新。

它的核心优势是缓存。只有当依赖的数据变化时，计算属性才会重新计算，否则它会返回上一次计算的结果。这意味着，计算属性是高效且智能的，非常适合那些需要频繁被使用、但不常变化的复杂计算。

1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
    (1).初次读取时会执行一次。
    (2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
    1.计算属性最终会出现在vm上，直接读取使用即可。
    2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

1.1 计算属性的语法

我们来看看如何在 Vue2 中使用计算属性：

<div id="app">
  <p>全名：{{ fullName }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      firstName: 'John',
      lastName: 'Doe'
    },
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName;
      }
    }
  });
</script>

在这个例子中，fullName 是一个计算属性，它依赖于 firstName 和 lastName。只要其中任何一个发生变化，fullName 就会自动重新计算，并且更新到页面上。

1.2 计算属性的优点

性能好：因为它有缓存机制，只有在依赖发生变化时才会重新计算，避免了不必要的重复计算。
简洁清晰：计算属性可以直接写成函数，逻辑清晰，代码简洁。
响应式：计算属性自动依赖相关数据，数据变化时会自动触发更新。

1.3 计算属性的实际应用

假设我们有一个电商系统，你需要显示用户购物车中商品的总价：

<div id="app">
  <p>总价：{{ totalPrice }} 元</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { name: 'Apple', price: 10, quantity: 2 },
        { name: 'Banana', price: 5, quantity: 3 }
      ]
    },
    computed: {
      totalPrice() {
        return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
      }
    }
  });
</script>

在这个例子中，totalPrice 是一个计算属性，它自动根据购物车中的商品信息计算出总价。当商品数量或价格发生变化时，totalPrice 会立即更新。

2. 什么是监听属性（`watch`）？

如果你需要在数据变化时执行一些异步操作或者复杂的逻辑处理，那计算属性可能不太适合你。这时候，Vue2 提供了另一种方案——监听属性（watch）。

监听属性让你可以在某个数据变化时做一些额外的操作，比如发送 HTTP 请求，手动操作 DOM，或者处理一些复杂的业务逻辑。

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
    (1).new Vue时传入watch配置
    (2).通过vm.$watch监视

2.1 监听属性的语法

让我们来看一下监听属性的基本用法：

<div id="app">
  <p>名字：{{ name }}</p>
  <input v-model="name">
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      name: ''
    },
    watch: {
      name(newVal, oldVal) {
        console.log(`名字从 ${oldVal} 变成了 ${newVal}`);
      }
    }
  });
</script>

在这个例子中，监听器会在 name 发生变化时触发，并打印新值和旧值。这种方法非常适合需要在数据改变时执行一些额外逻辑的情况。

2.2 监听属性的特点

适合异步操作：当你需要在数据变化时执行一些异步任务，比如发起 HTTP 请求或处理复杂的业务逻辑，监听属性是非常合适的选择。
手动控制：与计算属性的自动更新不同，监听属性的回调函数是手动触发的，允许你在数据变化时执行更复杂的操作。

2.3 实际应用：表单验证

假设我们有一个简单的注册表单，当用户输入用户名时，我们需要实时验证它是否已经被注册。这时候，监听属性就可以派上用场了：

<div id="app">
  <p>用户名：<input v-model="username"></p>
  <p v-if="isAvailable">用户名可用</p>
  <p v-else>用户名不可用</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      isAvailable: true
    },
    watch: {
      username(value) {
        // 模拟异步用户名校验
        setTimeout(() => {
          this.isAvailable = value !== 'taken'; // 假设 "taken" 是已被注册的用户名
        }, 500);
      }
    }
  });
</script>

在这个例子里，watch 监听 username 的变化，并模拟了一个异步操作来检查用户名是否可用。根据结果，页面会动态显示“用户名可用”或“用户名不可用”。

3.深度监听

深度监视：
    (1).Vue中的 watch 默认不监测对象内部值的改变（一层）。
    (2).配置deep:true可以监测对象内部值改变（多层）。
备注：
    (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
    (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

watch:{
    //监视多级结构中某个属性的变化
    'numbers.a':{
        handler(){
            console.log('a被改变了')
        }
    }
    //监视多级结构中所有属性的变化
    numbers:{
        deep:true,
        handler(){
            console.log('numbers改变了')
        }
    }
}