vue3 computed 和 watch 的差异

目录

前言

用法

computed

watch

代码

理解

高质量的使用


Vue.js作为一种现代化的前端框架,提供了丰富的特性来帮助开发者构建高效和响应式的用户界面。在这其中,computedwatch 是两个非常重要的选项,它们都用于处理数据的变化,但它们的用法、原理以及适用的场景都有很大的差异。接下来,我们将详细介绍这两者的区别,以及如何在Vue中高效地使用它们。

前言

在Vue应用中,数据的响应式变化是其核心特性之一。computedwatch 都提供了一种机制来观察和响应Vue实例上数据的变化。然而,它们的使用方式、原理以及适用的场景都有明显的差异。computed 通常用于计算派生状态,而 watch 更适用于观察数据的变化并执行异步操作或较大的计算。理解它们之间的区别,可以帮助我们更合理地设计我们的应用,使其更加高效和易于维护。

用法

computed

computed 是基于它们的依赖进行缓存的。只有在相关依赖发生改变时它们才会重新求值。这意味着只要依赖保持不变,多次访问 computed 属性将立即返回之前的计算结果,而不必再次执行函数。

computed 的常见用法是在模板内进行复杂计算:

复制代码
new Vue({
  data: {
    a: 1,
    b: 2
  },
  computed: {
    sum: function () {
      return this.a + this.b;
    }
  }
});

在上面的例子中,sum 是一个计算属性,依赖于 data 对象中的 ab。只要 ab 改变,sum 就会自动更新。

watch

watch 提供了一种方式,允许我们执行异步操作 (访问一个API,限制执行频率),并在我们观察的数据发生变化时,执行更多的操作。

复制代码
复制代码
new Vue({
  data: {
    question: '',
    answer: 'Questions usually contain a question mark. ;)'
  },
  watch: {
    // 如果 `question` 发生改变,这个函数就会运行
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods: {
    getAnswer: _.debounce(
      function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = 'Questions usually contain a question mark. ;)'
          return
        }
        this.answer = 'Thinking...'
        // 略
      },
      // 这是我们为用户停止输入等待的毫秒数
      500
    )
  }
})

在这个例子中,我们使用 watch 选项来观察 question 数据的变化,并执行一些异步操作或者较大计算。

代码

下面是一个具体的例子,展示了 computedwatch 的用法:

复制代码
复制代码
<template>
  <div>
    <input v-model="number">
    <p>原始数字:{{ number }}</p>
    <p>数字的平方(computed):{{ squaredNumber }}</p>
    <button @click="findSquareRoot">计算数字的平方根(watch)</button>
    <p>数字的平方根(watch):{{ squareRoot }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0,
      squareRoot: 0
    };
  },
  computed: {
    squaredNumber() {
      return this.number * this.number;
    }
  },
  watch: {
    number(newValue) {
      this.findSquareRoot();
    }
  },
  methods: {
    findSquareRoot() {
      this.squareRoot = Math.sqrt(this.number);
    }
  }
}
</script>

在这个例子中,我们有一个文本输入框,用户可以输入数字。我们使用 computed 属性来计算这个数字的平方,并使用 watch 来计算这个数字的平方根。

理解

computedwatch 的核心区别在于它们如何跟踪依赖和触发更新。

  • computed 更适合用在模板中需要进行复杂计算的场景,它会缓存计算结果,只有当其依赖发生变化时才会重新计算。这使得 computed 非常高效。

  • watch 则更适用于观察某个值的变化并执行异步操作或开销较大的操作。它不会缓存结果,每次触发都会执行指定的回调函数。

高质量的使用

为了确保我们高效地使用 computedwatch,我们需要遵循一些最佳实践:

  1. 合理选择 :根据具体场景合理选择使用 computed 还是 watch。如果你需要基于某个状态的派生状态,使用 computed;如果你需要在某个状态变化时执行异步或开销较大的操作,使用 watch

  2. 避免复杂的 computed 属性 :虽然 computed 属性是缓存的,但是不代表你可以在 computed 属性中执行非常复杂的操作。过于复杂的 computed 属性会使得组件的可维护性变差。

  3. 合理利用 watch 的配置项watch 提供了一些配置项,比如 deepimmediatedeep 允许你在观察对象时深度观察其内部的变化,而 immediate 允许你在添加观察者时立即触发回调。

通过遵循这些最佳实践,我们可以确保我们的Vue应用运行得更加顺畅,并且更易于维护。

相关推荐
jamison_12 天前
文心一言与 DeepSeek 的竞争分析:技术先发优势为何未能转化为市场主导地位?
人工智能·ai·chatgpt·gpt-3·1024程序员节
NaZiMeKiY3 天前
HTML5前端第六章节
前端·html·html5·1024程序员节
jamison_17 天前
颠覆未来:解锁ChatGPT衍生应用的无限可能(具体应用、功能、付费模式与使用情况)
ai·chatgpt·1024程序员节
NaZiMeKiY12 天前
HTML5前端第七章节
1024程序员节
earthzhang202116 天前
《Python深度学习》第四讲:计算机视觉中的深度学习
人工智能·python·深度学习·算法·计算机视觉·numpy·1024程序员节
明明真系叻1 个月前
2025.3.2机器学习笔记:PINN文献阅读
人工智能·笔记·深度学习·机器学习·1024程序员节·pinn
bitenum1 个月前
【C++/数据结构】队列
c语言·开发语言·数据结构·c++·青少年编程·visualstudio·1024程序员节
IT学长编程1 个月前
计算机毕业设计 基于SpringBoot的智慧社区管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
java·spring boot·后端·毕业设计·课程设计·论文笔记·1024程序员节
qq_382391331 个月前
WPF框架学习
学习·wpf·1024程序员节
✿ ༺ ོIT技术༻2 个月前
Linux:TCP和守护进程
linux·运维·服务器·网络·tcp/ip·1024程序员节