剖析计算属性和监视的奥秘：Vue.js 的响应式利器

2023-10-31 20:55:23

Vue.js 中计算属性和监视：实现响应式编程

在 Vue.js 中，响应式编程是实现应用程序随状态变化动态响应的关键。计算属性和监视是实现这一目标的两个基本机制，可让您创建敏捷且高效的用户界面。

计算属性：派生响应式数据

想象一下，您有一个应用程序需要在文本框中显示用户输入字符的长度。与其在每次用户键入时手动计算，不如使用计算属性，这是一个派生响应式数据的巧妙方法。

计算属性的语法如下：

computed: {
  computedProperty: {
    get() {
      // 计算派生数据并返回
    },
    set(newValue) {
      // 可选：在派生数据改变时执行操作
    }
  }
}

在我们的示例中，计算属性可以如下定义：

computed: {
  characterCount: {
    get() {
      return this.inputText.length;
    }
  }
}

现在，您可以在模板中使用 characterCount 计算属性，它将始终显示文本框中输入的字符数：

<template>
  <input v-model="inputText">
  <p>字符数：{{ characterCount }}</p>
</template>

监视：监听数据变化并执行操作

监视是另一项强大功能，可让您在数据属性发生变化时执行特定的操作。语法如下：

watch: {
  watchProperty: {
    handler(newValue, oldValue) {
      // 在监视的属性改变时执行的操作
    },
    deep: true // 可选：是否深层监视对象属性的变化
  }
}

回到我们的示例，假设您想要在用户输入超过 100 个字符时发出警告。可以使用监视来实现：

watch: {
  inputText: {
    handler(newValue) {
      if (newValue.length > 100) {
        // 发出警告，例如显示模态窗口或闪烁文本框
      }
    },
    deep: true // 监视文本框内容中的更改，即使是嵌套对象
  }
}

计算属性和监视的对比

虽然计算属性和监视都可以实现响应式，但它们的用法却截然不同：

计算属性： 用于派生新的响应式数据，这些数据依赖于其他数据属性。
监视： 用于在数据属性发生变化时执行特定操作。

实例：Vue.js 计数器应用程序

让我们结合计算属性和监视来构建一个 Vue.js 计数器应用程序。

<template>
  <button @click="increment">+</button>
  <span>{{ count }}</span>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  computed: {
    // 派生响应式计数器值
    countDisplay: {
      get() {
        return this.count;
      }
    },
  },
  watch: {
    // 在计数器值改变时执行操作
    count: {
      handler(newValue) {
        // 根据新的计数器值更新 DOM
        this.$refs.countDisplay.textContent = newValue;
      }
    },
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  mounted() {
    // 设置初始 DOM 值
    this.$refs.countDisplay.textContent = this.count;
  },
};
</script>