Vue.js 计算属性(computed)和侦听器(watch)初探

2023-11-27 16:10:22

Vue.js 中的数据响应

在 Vue.js 中，数据响应是框架的核心功能之一。它允许开发人员在数据发生变化时自动更新 UI。这种响应性是通过依赖追踪和发布-订阅模式实现的。当数据发生变化时，Vue.js 会自动更新所有依赖于该数据的组件。

计算属性(computed)

计算属性是 Vue.js 中的一种特殊类型的数据属性。与普通数据属性不同，计算属性的值不是直接存储在数据对象中，而是通过一个 getter 函数计算得出。这意味着计算属性的值只有在 getter 函数被调用时才会计算，并且在计算完成后，它将被缓存起来。

计算属性的优点是，它可以使代码更易读、更易维护。例如，假设你有这样一个组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>{{ messageLength }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  computed: {
    messageLength() {
      return this.message.length
    }
  }
}
</script>

在这个组件中，我们定义了一个计算属性 messageLength，它返回 message 的长度。如果我们修改 message 的值，那么 messageLength 也会自动更新。

侦听器(watch)

侦听器是 Vue.js 中的另一种机制，用于监听数据的变化。与计算属性不同，侦听器不会缓存计算结果。这意味着每次数据发生变化时，侦听器都会被触发，并且侦听器中的函数也会被重新执行。

侦听器的优点是，它可以让你在数据发生变化时执行一些操作。例如，假设你有一个组件，它需要在 message 的值发生变化时更新另一个组件的数据。你可以使用侦听器来实现这个功能：

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

<script>
export default {
  data() {
    return {
      message: 'Hello, world!',
      otherMessage: ''
    }
  },
  watch: {
    message(newValue, oldValue) {
      this.otherMessage = newValue.toUpperCase()
    }
  }
}
</script>