Vue2 中 computed、methods、watch 的区别及在 Vue3 中的变化

最新推荐文章于 2024-11-26 16:10:48 发布

阿贾克斯的黎明

最新推荐文章于 2024-11-26 16:10:48 发布

阅读量493

点赞数 8

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_57836225/article/details/142769792

版权

前端专栏收录该内容

149 篇文章 1 订阅

订阅专栏

Vue2 中 computed、methods、watch 的区别及在 Vue3 中的变化

一、Vue2 中三者的区别

（一）computed 与 methods 的区别

（二）computed 与 watch 的区别

在 Vue 开发中，computed、methods和watch是三个常用的特性，它们在实现功能上有相似之处，但也存在着一些明显的区别。

一、Vue2 中三者的区别

（一）computed 与 methods 的区别

功能相似性：两者都可以实现返回特定值的功能。例如在示例中，无论是通过计算属性computed还是方法methods，都可以对数据进行处理并返回结果。
缓存特性：
- computed是基于响应式进行依赖缓存的。如果计算属性的依赖值没有发生变化，那么它会直接使用缓存的结果，不会重复执行计算逻辑。在示例中，多次调用计算属性，控制台只打印了一次结果，说明后续调用走了第一次的缓存。
- methods没有缓存，每次调用都会执行相应的方法。在示例中，多次调用方法，控制台会打印出相应次数的结果。

在性能方面，在简单情况下如果多次使用且依赖值不发生变化，computed的性能要比methods好。但在特殊情况，如点击按钮跳转页面等需要执行特定行为的场景，就需要使用methods。

（二）computed 与 watch 的区别

触发方式：
- watch是一个监听属性，只有当被监听的数据发生改变时才会触发内部的代码执行。在示例中，监听number的变化，只有当number的值发生改变时，控制台才会打印出新旧值，并执行相应的逻辑。
- computed不需要数据发生改变就可以返回结果，只要其依赖的响应式数据存在，就会根据依赖关系自动计算并返回结果。
使用场景：
- 对于计算总价的场景，如果使用computed，可以直接根据单价和数量计算出总价，并且只要单价或数量发生变化，总价会自动更新。而使用watch，需要监听单价或数量的变化，然后手动计算总价并更新。
- 如果需要监听路由的变化，watch更加方便，可以直接监听路由的变化并执行相应的逻辑。

二、Vue3 中的变化

在 Vue3 中，computed、methods和watch的基本概念和用法与 Vue2 相似，但也有一些变化和改进。

（一）Composition API

Vue3 引入了 Composition API，使得代码的组织更加灵活和可维护。在 Composition API 中，可以使用setup函数来定义组件的逻辑，并且可以更好地利用computed、methods和watch。

例如，以下是使用 Vue3 Composition API 的示例代码：

<template>
  <div>
    <p>Total: {{ total }}</p>
    <input v-model="number" />
    <input v-model="price" />
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const number = ref(2);
    const price = ref(10);
    const total = computed(() => number.value * price.value);

    watch([number, price], ([newNumber, newPrice]) => {
      total.value = newNumber * newPrice;
    });

    return {
      number,
      price,
      total,
    };
  },
};
</script>

在这个示例中，使用ref定义响应式变量，computed计算总价，watch监听数量和单价的变化并更新总价。