Vue中的computed和watch怎么使用寻技术

这篇文章主要介绍“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>

该示例定义了一个名为