详解Vue的监听属性

Vue.js 是一个流行的 JavaScript 框架，它通过响应式数据绑定，让前端开发更加简单和灵活。在 Vue 中，可以通过监听属性来监听数据的变化，并在数据变化时自动更新页面。本攻略将详细讲解 Vue 的监听属性，包括如何监听数据对象、数组和计算属性的变化。

监听属性的基本使用

在 Vue 中，可以通过 watch 函数来监听一个数据的变化。watch 函数是一个对象，其中每个属性都是需要监听的数据，并且对应的值是一个函数，用于处理数据变化的逻辑。例如，可以通过以下代码监听一个 count 数据的变化：

data() {
  return {
    count: 0
  };
},
watch: {
  count(newVal, oldVal) {
    console.log(`count 变化了：${oldVal} -> ${newVal}`)
  }
}

上面的代码中，count 是需要监听的属性名，newVal 和 oldVal 分别表示新值和旧值。每当 count 数据发生变化时，都会触发 watch 函数，并输出相应的信息。

监听对象的变化

在 Vue 中，可以通过 watch 函数监听一个对象的变化，例如：

data() {
  return {
    user: {
      name: 'Tom',
      age: 18
    }
  };
},
watch: {
  user: {
    handler(newVal, oldVal) {
      console.log(`user 变化了：${JSON.stringify(oldVal)} -> ${JSON.stringify(newVal)}`)
    },
    deep: true
  }
}

上面的代码中，user 是需要监听的对象，handler 函数用于处理对象变化。由于对象是引用类型，直接监听对象是不能监听到其内部属性的变化的。因此需要通过设置 deep 选项来深度监听对象内部属性的变化。在上面的示例中，deep 被设置为 true，表示深度监听，当 user 对象内部属性发生变化时，也会触发 handler 函数。

监听数组的变化

在 Vue 中，可以通过 watch 函数监听一个数组的变化，例如：

data() {
  return {
    list: [1, 2, 3]
  };
},
watch: {
  list: {
    handler(newVal, oldVal) {
      console.log(`list 变化了：${JSON.stringify(oldVal)} -> ${JSON.stringify(newVal)}`)
    },
    deep: true
  }
}

上面的代码中，list 是需要监听的数组，handler 函数用于处理数组变化。由于数组是引用类型，直接监听数组是不能监听到其内部元素的变化的。因此需要通过设置 deep 选项来深度监听数组内部元素的变化。在上面的示例中，deep 被设置为 true，表示深度监听，当 list 数组内部元素发生变化时，也会触发 handler 函数。

监听计算属性的变化

在 Vue 中，可以通过 watch 函数监听一个计算属性的变化，例如：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
watch: {
  fullName(newVal, oldVal) {
    console.log(`fullName 变化了：${oldVal} -> ${newVal}`)
  }
}

上面的代码中，fullName 是一个计算属性，可以通过监听它的变化来实现相应的逻辑。在上面的示例中，每当 firstName 或 lastName 数据发生变化时，都会重新计算 fullName，并触发相应的变化事件。

示例说明1：监听数组元素的变化

假设现在有一个购物车页面，其中有一个 cartItems 数组表示购物车内的商品列表，我们需要监听商品数量的变化，并在数量变化时更新购物车的总价。可以通过以下代码实现：

data() {
  return {
    cartItems: [
      { id: 1, name: '手机', price: 1000, count: 1 },
      { id: 2, name: '电脑', price: 5000, count: 2 },
      { id: 3, name: '平板', price: 2000, count: 1 }
    ],
    totalPrice: 0
  };
},
computed: {
  // 计算购物车总价
  countTotalPrice() {
    return this.cartItems.reduce((total, item) => {
      return total + item.price * item.count;
    }, 0);
  }
},
watch: {
  // 监听cartItems数组元素变化
  cartItems: {
    handler(newVal, oldVal) {
      console.log(`cartItems 变化了：${JSON.stringify(oldVal)} -> ${JSON.stringify(newVal)}`);
      // 重新计算购物车总价
      this.totalPrice = this.countTotalPrice;
    },
    deep: true
  }
}

上面的代码中，通过 watch 函数监听 cartItems 数组的变化，并设置 deep 选项为 true，表示深度监听数组元素的变化。每当购物车商品数量发生变化时，会重新计算购物车的总价，并将总价更新到页面上。

示例说明2：监听对象属性的变化

假设现在有一个表单页面，其中有一个 user 对象表示用户的个人信息，我们需要监听个人信息的变化，并在信息变化时提示用户是否保存。可以通过以下代码实现：

data() {
  return {
    user: {
      name: '',
      age: '',
      email: ''
    }
  };
},
watch: {
  // 监听user对象属性变化
  'user.name'(newVal, oldVal) {
    console.log(`用户姓名变化了：${oldVal} -> ${newVal}`);
    // 提示用户是否保存
    this.showSaveConfirm();
  },
  'user.age'(newVal, oldVal) {
    console.log(`用户年龄变化了：${oldVal} -> ${newVal}`);
    // 提示用户是否保存
    this.showSaveConfirm();
  },
  'user.email'(newVal, oldVal) {
    console.log(`用户邮箱变化了：${oldVal} -> ${newVal}`);
    // 提示用户是否保存
    this.showSaveConfirm();
  }
}

上面的代码中，通过 watch 函数监听 user 对象的属性变化，每当 name、age 或 email 发生变化时，会触发相应的事件，并调用 showSaveConfirm 方法提示用户是否保存数据。利用这种方式，我们可以监听任何一个对象的属性变化，并在变化时做出相应的处理。

完整攻略就是这样，希望能对你学习 Vue.js 有所帮助！