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应用运行得更加顺畅,并且更易于维护。

相关推荐
惜.己15 小时前
Jmeter中的断言(二)
测试工具·jmeter·1024程序员节
西电研梦1 天前
考研倒计时30天丨和西电一起向前!再向前!
人工智能·考研·1024程序员节·西电·西安电子科技大学
惜.己1 天前
Jmeter中的断言(四)
测试工具·jmeter·1024程序员节
·云扬·1 天前
Java IO 与 BIO、NIO、AIO 详解
java·开发语言·笔记·学习·nio·1024程序员节
网安_秋刀鱼1 天前
PHP代码审计 --MVC模型开发框架&rce示例
开发语言·web安全·网络安全·php·mvc·1024程序员节
HUODUNYUN2 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节
惜.己2 天前
Jmeter的后置处理器(二)
测试工具·github·1024程序员节
惜.己2 天前
Jmeter中的断言(一)
测试工具·jmeter·1024程序员节
cainiao0806052 天前
《物理学进展》
1024程序员节·核心期刊·知网期刊·职称评审
FFDUST3 天前
C++ —— string类(上)
c语言·开发语言·数据结构·c++·stl·1024程序员节