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

相关推荐
亦枫Leonlew1 小时前
微积分复习笔记 Calculus Volume 1 - 4.7 Applied Optimization Problems
笔记·数学·微积分·1024程序员节
小肥象不是小飞象1 小时前
(六千字心得笔记)零基础C语言入门第八课——函数(上)
c语言·开发语言·笔记·1024程序员节
一个通信老学姐10 小时前
专业130+总400+武汉理工大学855信号与系统考研经验电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节
力姆泰克11 小时前
看电动缸是如何提高农机的自动化水平
大数据·运维·服务器·数据库·人工智能·自动化·1024程序员节
力姆泰克11 小时前
力姆泰克电动缸助力农业机械装备,提高农机的自动化水平
大数据·服务器·数据库·人工智能·1024程序员节
程思扬11 小时前
为什么Uptime+Kuma本地部署与远程使用是网站监控新选择?
linux·服务器·网络·经验分享·后端·网络协议·1024程序员节
转世成为计算机大神11 小时前
网关 Spring Cloud Gateway
java·网络·spring boot·1024程序员节
paopaokaka_luck12 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
幼儿园园霸柒柒12 小时前
第七章: 7.3求一个3*3的整型矩阵对角线元素之和
c语言·c++·算法·矩阵·c#·1024程序员节
好想有猫猫12 小时前
【51单片机】串口通信原理 + 使用
c语言·单片机·嵌入式硬件·51单片机·1024程序员节