计算属性computed和侦听器watch的区别

 计算属性computed：

        定义方式： 使用 computed 属性定义一个计算属性。 

        用途：用于定义基于响应式数据进行计算的属性，返回计算结果。通常用于衍生出一个新的属性。 

        实时性： 计算属性是基于它的依赖进行缓存的，只有依赖发生变化时，才会重新计算。在同一次事件循环中，多次访问同一个计算属性会返回缓存的结果而不会重新计算。 

        特点：        

        1、支持缓存，只有依赖数据发生改变，才会重新进行计算；

        2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化；

        3、computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值；

        4、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed。

        5、如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

当我们定义一个计算属性的时候，计算属性是一个函数，最后函数返回的结果就是计算属性得到的结果。

当我们去第一次使用计算属性的时候，会执行计算属性并进行计算，然后将计算的结果缓存起来。

后续当我们再去使用计算属性的时候，如果计算属性中使用到的数据没有发生变化，那么就会直接读取缓存的结果，不会重新计算

 

        示例：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!",
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split("").reverse().join("");
    },
  },
};
</script>

---

侦听器watch：

        用途： 用于观察响应式数据的变化，执行自定义的操作。通常用于对数据的异步操作或复杂逻辑的处理。

        定义方式： 使用 watch 属性定义一个观察者。

        实时性： watch 监听的数据发生变化时，会立即执行相应的操作。不像计算属性，它不缓存结果，每次数据变化都会触发操作。

         特点：

        1、不支持缓存，数据变，直接会触发相应的操作；

        2、watch支持异步；

        3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

        4、当一个属性发生变化时，需要执行对应的操作；一对多；

        5、监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数： 

当我们定义一个侦听器的时候，侦听器与data中的属性同名，当属性的值发生改变的时候，侦听器被触发执行。 

         示例：

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

<script>
export default {
  data() {
    return {
      message: "Hello Vue!",
    };
  },
  watch: {
    message(newMessage, oldMessage) {
      console.log(`Message changed from ${oldMessage} to ${newMessage}`);
    },
  },
};
</script>

区别总结：

• 计算属性：

  • 用于基于响应式数据进行计算。
  • 结果会被缓存，只有相关依赖发生变化时才重新计算。
  • 适用于衍生数据的场景。

• Watch（侦听器）：

  • 用于观察响应式数据的变化执行自定义操作。
  • 不缓存结果，每次数据变化都会触发操作。
  • 适用于需要在数据变化时执行异步操作或复杂逻辑的场景。 

        通常情况下，计算属性适用于简单的数据计算，而 watch 更适用于对数据变化做一些异步或复杂处理的情况。