浅谈在 Vue2 和 Vue3 中计算属性和侦听器的一些变化

这篇具有很好参考价值的文章主要介绍了浅谈在 Vue2 和 Vue3 中计算属性和侦听器的一些变化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


浅谈在 Vue2 和 Vue3 中计算属性和侦听器的一些变化

📋前言

计算属性 computed 和侦听器 watch 都是 Vue.js 框架中用来响应式更新视图的重要概念。因此无论是在哪个版本,它们都是不可缺少的概念,这篇文章就不过多详细介绍计算属性和侦听器的概念和理论了,接下来主要谈谈 Vue2Vue3 中计算属性和侦听器的语法变化和异同。


🎯计算属性

计算属性:计算属性实际上是一种计算一个值并将结果缓存起来的方法。当依赖的数据发生变化时,缓存会被重新计算。计算属性相比直接在模板表达式中调用方法或者直接使用表达式计算的好处在于其可以缓存结果,减少不必要的计算,提高性能。

Vue3 中的计算属性和 Vue2 中的计算属性基本相同,不过在语法上有所不同。在 Vue3 中,我们可以使用 computed 函数来定义计算属性,它接受一个函数作为参数,并返回一个 ref 对象,这个 ref 对象会自动追踪计算属性使用到的数据,并且在这些数据发生变化时重新计算计算属性的值。

上面说到计算属性是以函数的形式出现在组件的 computed 选项中,在新版的 Vue 3.xsetup 语法糖里,可以计算属性的具体实现函数传递给 computed() 方法,然后赋值给一个变量。
浅谈在 Vue2 和 Vue3 中计算属性和侦听器的一些变化
💻接下举个简单的例子。

<template>
  <p>原始count:{{ count }}</p>
  <p>计算属性count:{{ doubleCount }}</p>
  <p>JavaScript表达式的count:{{ count * 2 }}</p>
</template>

<script setup>
import { computed, ref } from "vue";
const count = ref(2);
const doubleCount = computed(() => count.value * 2);
</script>

浅谈在 Vue2 和 Vue3 中计算属性和侦听器的一些变化


🎯侦听器

侦听器:侦听器则通过监听数据变化来触发回调函数的执行。侦听器适用于当需要在数据变化时执行异步或开销较大的操作时使用,比如发送 Ajax 请求或进行复杂的计算。

Vue3 中的侦听器与 Vue2 中的 watch API 不同,Vue3 中可以使用新的 watchEffect 函数来监听响应式数据的变化,同时也可以使用 watch 监听指定的数据。

1️⃣ watchEffect 函数接受一个回调函数作为参数,这个回调函数中可以访问任何响应式数据,当这些数据变化时,回调函数都会被重新执行。

2️⃣ 如果要监听指定的数据,可以使用 watch 函数。它接受两个参数:要监听的数据和回调函数,当监听的数据发生变化时,回调函数会被执行。

💻接下举个简单的例子。

<template>
  <input type="number" v-model="num" />
  <p>result为:{{ result }}</p>
</template>

<script setup>
import { ref, watch, watchEffect } from "vue";
const num = ref(0);
const result = ref(0);
watch(
  () => num.value,
  (newValue, oldValue) => {
    console.log("旧值为:", oldValue, "新值为:", newValue);
    return (result.value = num.value * num.value);
  }
);
watchEffect(() => {
  console.log(`num: ${num.value}`);
});
</script>

浅谈在 Vue2 和 Vue3 中计算属性和侦听器的一些变化


📝最后

计算属性 computed 和侦听器 watch 都是实现响应式编程的重要工具,可以方便地处理复杂的业务数据变化场景。总的来说,Vue.js 3.x 中的计算属性和侦听器与 2.x 版本还是非常相似,都是用来处理响应式数据变化的关键工具。不同之处在于 3.x 版本中的语法略微有所不同,并且需要注意一些细节,如嵌套对象的侦听。
浅谈在 Vue2 和 Vue3 中计算属性和侦听器的一些变化
文章来源地址https://www.toymoban.com/news/detail-425337.html

到了这里,关于浅谈在 Vue2 和 Vue3 中计算属性和侦听器的一些变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • VUE教程-基础-计算属性和侦听器

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量  message  的翻转字符串。当你想要在模板中的多

    2024年02月17日
    浏览(59)
  • 二、基础篇 vue计算属性和侦听器

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量  message  的翻转字符串。当你想要在模板中的多

    2024年01月18日
    浏览(59)
  • 前端Vue入门-day02-vue指令、computed计算属性与watch侦听器

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 指令补充 指令修饰符 v-bind 对于样式控制的增强  操作class 案例:京东秒杀 tab 导航高亮 操作style  v-model 应用于其他表单元素  computed 计算属性 基础语法 computed 计算属

    2024年02月11日
    浏览(45)
  • 【源码系列#04】Vue3侦听器原理(Watch)

    专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核💪推荐🙌 欢迎各位ITer关注点赞收藏🌸🌸🌸 侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数 第一个参数可以是不同形式的“数据源”:它可以是一个 ref (包括计算属性

    2024年02月04日
    浏览(65)
  • Vue3前端开发,watch数据侦听器的立即执行

    Vue3前端开发,watch数据侦听器的立即执行!实际上,我们可以通过回调函数的后面,再追加一个对象,来设置这个参数,immediate:true.来实现一种立即执行的效果。在页面记载完成后,马上就会执行一次watch. 如上所示,我们在回调函数的后面,追加了一个参数,是一个对象类型

    2024年01月18日
    浏览(51)
  • Vue3前端开发,watch侦听器的深度监听和精确监听

    Vue3前端开发,watch侦听器的深度监听和精确监听!今天和大家分享的内容是,关于watch的深度侦听和精确监听。 首先看一下,第一个案例,练习的是,深度监听的效果。默认是浅的侦听,是不会触发回调函数的。 如图,当我们点击按钮,修改num值的时候,触发了回调函数,在

    2024年01月23日
    浏览(46)
  • Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

    目录 前言 computed watch watch侦听ref数据 ref简单数据类型 ref复杂数据类型 watch侦听reactive数据 本文介绍在vue3中的computed计算属性和watch侦听属性。介绍watch如何侦听被ref和reactive包裹的数据 在vue3中,计算属性computed也是组合式api,也就是说要先引入,再在setup中使用 语法 完整:

    2024年01月18日
    浏览(62)
  • Vue3浅谈:(二)Vue3计算属性

    目录 一、Vue3计算属性 1.Vue3计算属性基础使用 2.计算属性缓存和常规方法 3.可写计算属性 当我们需要针对一些数据进行一些逻辑运算时可以使用模板中的表达式如下: 但是如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。因此我们可以使用计算属性 computed()  方法来

    2023年04月25日
    浏览(34)
  • Vue——侦听器

    目录 基本示例​ 深层侦听器​ 即时回调的侦听器​ 回调的触发时机​ this.$watch()​ 停止侦听器​        计算属性允许我们声明性地计算衍生值。然而在有些情况下,我们需要在状态变化时执行一些“副作用”:例如更改 DOM,或是根据异步操作的结果去修改另一处的状态

    2023年04月13日
    浏览(54)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包