vue3 computed 和 watch 的差异

这篇具有很好参考价值的文章主要介绍了vue3 computed 和 watch 的差异。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue3 computed 和 watch 的差异,1024程序员节

🙂博主:锅盖哒
🙂文章核心: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应用运行得更加顺畅,并且更易于维护。

vue3 computed 和 watch 的差异,1024程序员节文章来源地址https://www.toymoban.com/news/detail-719986.html

到了这里,关于vue3 computed 和 watch 的差异的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决github ping不通的问题(1024程序员节快乐!

    1024程序员节快乐!( 随便粘贴一个文档,参加活动 域名解析(域名-IP):https://www.ipaddress.com/ Ubuntu平台 github经常ping不通或者访问缓慢,方法是更改hosts文件 在hosts里添加github的ip 140.82.114.4 www.github.com 199.232.5.194 github.global.ssl.fastly.net 54.231.114.219 github-cloud.s3.amazonaws.com 可以访

    2024年01月18日
    浏览(80)
  • 1024程序员节特辑:【Spring Boot自动配置原理揭秘】

    主页传送门:📀 传送   Spring Boot 是一个用于创建独立的、生产级别的 Spring 应用程序的框架。它极大地简化了 Spring 应用程序的开发过程,其中一个关键的功能就是自动配置(Auto-Configuration)。   自动配置可以根据项目需求自动配置各种服务和组件,它可以帮助开发者

    2024年02月08日
    浏览(69)
  • 好用且免费的CodeWhisperer,给1024程序员节送礼来了

          国庆期间没有胆量去人从众的景点,关在家里刷手机时意外在亚马逊的User Group公众号上发现了CodeWhisperer这么个好东西(bu yao qian),以后撸代码也可以提高生产力(fang yang mo yu)了,这还不赶紧上手试一下。看官方介绍说它支持流行的IDE开发工具,包括VS Code、Intelli

    2024年02月08日
    浏览(54)
  • Vue3的computed计算属性和watch监视(四)

    监视【ref】定义的【基本数据】类型 监视【ref】定义的【对象类型】数据 监视【reactive】定义的【对象类型】数据  与 场景二 不同的是,newVal和oldVal是一样的,表明通过Object.assign重新赋值的时候,并不是生成一个新的对象,而是新的值覆盖了旧值 监视【ref】或者【reactiv

    2024年02月21日
    浏览(45)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(七)详情页

    模板代码 创建 srcviewsDetailindex.vue 文件,添加以下代码: 配置路由 在 srcrouterindex.js 中添加对应路由【 /detail/{goodId} 】: 链接跳转 对 srcviewsHomecomponentsHomeNew.vue 文件及其他涉及商品信息的页面修改路由跳转: 封装接口 在 srcapisdetail.js 文件中封装接口用于获取商品信息

    2024年02月10日
    浏览(59)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(八)登录页面

    登录页面的主要功能就是表单校验和登录登出业务。 account password cdshi0080 123456 cdshi0081 123456 cdshi0082 123456 cdshi0083 123456 cdshi0084 123456 cdshi0085 123456 cdshi0086 123456 cdshi0087 123456 cdshi0088 123456 模版代码 在 srcviewsLoginindex.vue 中添加登录页代码: 配置路由跳转 修改 srcviewsLayoutcompon

    2024年02月10日
    浏览(54)
  • 1024程序员节带你玩转图片Exif信息获取之JavaScript

    目录 一、前言 二、背景 三、Exif.js          1、Exif.js 简介 2、Exif.js 引入 四、多场景展示数据获取 1、原始图片直接获取  2、base64 编码文件加载  3、文件上传的方式加载  五、总结        1024是2的十次方,二进制计数的基本计量单位之一。1G=1024M,而1G与1级谐音,也有一

    2024年02月20日
    浏览(60)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(二)初始化项目

    Vue3是Vue.js最新的主要版本,它已经于2020年9月18日发布。它提供了许多新功能和性能改进,这些改进使得Vue更易于使用和更具可扩展性。 以下是Vue3的一些主要特性: 更快的渲染:Vue3使用重写的响应式系统,它使用Proxy对象来解决Vue2中的性能瓶颈问题。这使得Vue3的渲染速度比

    2024年02月11日
    浏览(44)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(一)初始化项目

    Vue3是Vue.js最新的主要版本,它已经于2020年9月18日发布。它提供了许多新功能和性能改进,这些改进使得Vue更易于使用和更具可扩展性。 以下是Vue3的一些主要特性: 更快的渲染:Vue3使用重写的响应式系统,它使用Proxy对象来解决Vue2中的性能瓶颈问题。这使得Vue3的渲染速度比

    2024年02月15日
    浏览(82)
  • 1024程序员节特辑 | Spring Boot实战 之 MongoDB分片或复制集操作

    Spring实战系列文章: Spring实战 | Spring AOP核心秘笈之葵花宝典 Spring实战 | Spring IOC不能说的秘密? 国庆中秋特辑系列文章: 国庆中秋特辑(八)Spring Boot项目如何使用JPA 国庆中秋特辑(七)Java软件工程师常见20道编程面试题 国庆中秋特辑(六)大学生常见30道宝藏编程面试题

    2024年02月08日
    浏览(82)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包