深入浅出，领悟Vue.js计算属性computed与侦听属性watch的奥秘

2024-02-21 11:40:03

在Vue.js中，组件对象支持计算属性computed和侦听属性watch两个选项，它们在Vue.js的响应式系统中扮演着重要的角色。本文将通过代码示例和原理分析，详细阐释computed和watch的用法、异同和底层实现原理，帮助读者深入理解Vue.js的数据绑定机制。

认识computed：计算属性的魅力

computed是一个计算属性，它允许我们从现有的数据属性中派生出新的数据属性。computed属性与模板中使用的数据绑定类似，但是它不会直接监听数据属性的变化，而是根据依赖关系进行计算。只有当依赖的数据属性发生变化时，computed属性才会重新计算并更新视图。

让我们举一个简单的例子来理解computed的用法。假设我们有一个组件，其中包含一个文本框，用于输入用户姓名。同时，我们还想显示一个消息，告诉用户输入的姓名长度。我们可以使用computed属性来实现这个功能。

<template>
  <div>
    <input type="text" v-model="name">
    <p>Hello, {{ name }}!</p>
    <p>Your name has {{ nameLength }} characters.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  computed: {
    nameLength() {
      return this.name.length
    }
  }
}
</script>

在这个示例中，我们定义了一个名为nameLength的computed属性。它依赖于name数据属性，并且返回name的长度。当用户在文本框中输入姓名时，name数据属性发生变化，computed属性nameLength也会自动更新。然后，视图中的消息也会相应地更新，显示输入的姓名长度。

探索watch：侦听属性的奥秘

watch属性允许我们监听数据属性的变化，并在数据属性发生变化时执行特定的操作。watch属性可以接受一个函数或一个对象作为参数。如果我们传递一个函数，那么当数据属性发生变化时，该函数将会被调用。如果我们传递一个对象，那么我们可以指定回调函数和一些额外的选项，例如深层监听和立即执行。

让我们继续上面的例子，假设我们想在每次用户输入姓名时都记录一条日志消息。我们可以使用watch属性来实现这个功能。

<template>
  <div>
    <input type="text" v-model="name">
    <p>Hello, {{ name }}!</p>
    <p>Your name has {{ nameLength }} characters.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  computed: {
    nameLength() {
      return this.name.length
    }
  },
  watch: {
    name(newValue, oldValue) {
      console.log(`Name changed from "${oldValue}" to "${newValue}".`)
    }
  }
}
</script>

在这个示例中，我们定义了一个名为name的watch属性。它监听name数据属性的变化，并在每次变化时执行回调函数。回调函数接受两个参数：newValue和oldValue，分别表示新值和旧值。在回调函数中，我们记录了一条日志消息，显示姓名从旧值更改为新值。

computed与watch：异同探究

computed和watch属性在用法和功能上有一些相似之处，但也有明显的区别。

相似之处：
- computed和watch都可以在Vue.js组件中使用。
- computed和watch都支持深层监听。
- computed和watch都可以在模板中使用。
区别：
- computed属性是计算属性，它会根据依赖的数据属性的变化而重新计算。watch属性是侦听属性，它会在数据属性发生变化时执行特定的操作。
- computed属性只能返回一个值，而watch属性可以执行任何操作，例如记录日志消息、发送网络请求等。
- computed属性不会影响视图的更新，而watch属性会影响视图的更新。