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选项中定义的函数。该函数输出将类似于以下内容：

count changed from 0 to 1
count changed from 1 to 2
count changed from 2 to 3
...

到此这篇关于Vue中的computed和watch用法及区别的文章就介绍到这了,更多相关Vue computed和watch内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论