Vue中的computed和watch怎么使用

开发技术作者：iii 2024-05-06 08:30:01

这篇文章主要介绍“Vue中的computed和watch怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue中的compute...

这篇文章主要介绍“Vue中的computed和watch怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue中的computed和watch怎么使用”文章能帮助大家解决问题。

vue computed 是如何实现的

Vue 的 computed 属性实现了一个响应式的计算属性。当计算属性所依赖的响应式变量发生改变时，计算属性会自动重新计算其值。

Vue 在内部通过使用 Object.defineProperty() 方法来实现 computed 属性。具体地说，Vue 创建一个新的计算属性描述符对象，该对象包含 get 和 set 方法，然后调用 Object.defineProperty() 方法将计算属性绑定到 Vue 实例上。

在 get 方法中，Vue 会收集计算属性所依赖的响应式变量，并建立依赖关系图。这样，当响应式变量发生变化时，Vue 就能够知道哪些计算属性需要重新计算。

在 set 方法中，Vue 可以执行一些额外的逻辑，例如检查计算属性是否可以被设置。但通常情况下，set 方法是不需要的，因为计算属性是只读的。

总之，Vue 的 computed 属性利用了 JavaScript 中的属性描述符和响应式原理，来实现一个方便、高效、易用的计算属性系统。

computed demo

下面是一个简单的 Vue Computed 的实现示例：

// 创建一个 Vue 实例
const vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe',
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    },
  },
});
// 访问计算属性
console.log(vm.fullName); // "John Doe"

在上述示例中，Vue 实例 vm 中定义了一个 data 对象和一个 computed 对象。在 computed 对象中，我们定义了一个名为 fullName 的函数，它返回 firstName 和 lastName 属性的组合。

当我们访问 vm.fullName 时，Vue 会自动调用 fullName 函数，并将其结果缓存起来。如果后续访问 vm.fullName，而且 firstName 或 lastName 没有发生变化，Vue 将直接返回之前缓存的结果，而不会重新计算。

这就是 Vue Computed 的基本工作原理。通过定义一个计算属性，你可以轻松地实现数据的计算和缓存。这样做不仅可以提高性能，还可以使代码更加简洁易读。

vue的watch是如何实现的

Vue.js 的 watch 是通过使用 Object.defineProperty() 函数实现的。当你在 Vue 实例上定义一个 watch 时，Vue 会将其作为一个属性添加到实例对象中，并使用 Object.defineProperty() 将该属性转换为 getter/setter 形式。这样，当被监控的属性发生变化时，Vue 就会调用对应的回调函数以执行相应的操作。同时，Vue 还提供了深度监听和立即触发回调等

watch demo

以下是一个简单的 Vue 示例，演示如何使用watch来观察数据的变化：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      increment() {
        this.count++;
      },
    },
    watch: {
      count(newVal, oldVal) {
        console.log(`count changed from ${oldVal} to ${newVal}`);
      },
    },
  };
</script>

该示例定义了一个名为count的响应式数据，并在模板中显示它。还定义了一个increment方法，在点击按钮时将计数器递增。此外，还定义了一个watch选项，以便在数据变化时打印一条消息。

当你在浏览器中运行该示例时，每次点击“Increment”按钮时，Vue 都会检测到count的值已更改，并且将调用watch选项中定义的函数。该函数输出将类似于以下内容：