vue3 computed、watch和watchEffect的特性区别

最新推荐文章于 2024-03-15 11:03:28 发布
最新推荐文章于 2024-03-15 11:03:28 发布
阅读量651 收藏 1
点赞数
分类专栏： vue3 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MM_520131400/article/details/124456969
版权

watch的特性

  • 具有一定的惰性， 第一次页面展示的时候不会执行，只有数据变化的时候才会执行
  • 需要手动传入依赖
  • 既要指明监视的属性，也要指明监视的回调
  • 可以同时监听多个数据的变化
  • 参数可以拿到当前值和原始值

watchEffect有点像commputed:
1.computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值
2.watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值

watchEffect的特性

  • 首次加载就会监听
  • 不需要指定监听的数据，组件初始化的时候就会执行一次用以收集依赖，而后收集到的依赖发生变化，这个回调才会再次执行
  • 不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
  • 不需要手动传入依赖
  • 页面的首次加载就会执行一次回调函数，来自动获取依赖
  • 无法获取到原值，只能得到最新值

三者区别：

computed函数:
与computed配置功能一致
内部只有一个方法的时候是getter
有getter和setter
watch函数

与watch配置功能一致
监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
通过配置deep为true, 来指定深度监视

watchEffect函数
不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
默认初始时就会执行第一次, 从而可以收集需要监视的数据
监视数据发生变化时回调

坏人OvO
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中watch和computed的区别与使用方法
10-14
**watch 和 computed 的区别** 1. 计算属性是自动计算的，并且只有在依赖变化时才更新，而 watch 会在每次数据变化时执行回调。 2. 计算属性支持缓存，而 watch 不支持。 3. watch 更适合处理数据变化后的异步操作，...
Vue3中的computed、watch和watchEffect的区别
DM_Cxx的博客
06-25 614
先前已经写过Vue3中watch和的文章，可以看这里，该篇文章主要聊聊computed特性以及这三者之间的区别。computed相信大家都不陌生，只是Vue中出现了watch和等侦听器，这三者大多数情景下相同结果的使用体验，使得我们模糊了这三者之前的作用区别。computed又称作，先给段官方描述 ⬇接受一个 getter 函数，。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。computed。
vue3 setup 里的计算属性（computed）和侦听器（watch/watchEffect）
热门推荐
青蛙king的博客
07-05 2万+
计算属性在vue3中是一个函数【参考】 VUE3（十四）使用计算属性computed和监听属性watch vue3的计算属性与watch Vue 3 响应式侦听与计算 vue3计算属性（computed）与监听（watch） Vue3官网-高级指南（十七）响应式计算和侦听（onTrack、onTrigger、onInvalidate、副作用的刷新时机、 、pre）................................................
补充：watch和computed对比
qq_47286790的博客
02-05 697
比较计算属性和监视属性~~~
ue3 computed watch 和 watchEffect 使用和区别
最新发布
AdleyTales的技术博客
03-15 405
依赖追踪：computed 需要显式声明依赖，并且具有缓存机制。watch 可以监听单个或多个数据源，可以是响应式引用或对象的属性。watchEffect 自动追踪在回调函数中使用的所有响应式状态。返回值：computed 返回一个计算值，可以有 getter 和 setter。watch 和 watchEffect 不返回值，watch 用于监听变化并执行回调，watchEffect 用于执行副作用。
computed和watch和watchEffect 相同和不同
weixin_49035434的博客
01-16 482
2.当响应式数据变化需要执行异步操作，如从服务器获取数据，watch 可以在数据变化后触发这些操作，并处理异步操作的结果。1.自动收集依赖: watchEffect 会自动追踪执行过程中用到的响应式状态, 并在状态发生变化时重新执行.响应性: 都是Vue响应式系统的一部分, 都会自动追踪依赖的响应式数据, 并在这些数据变化时重新执行.1. 缓存: 计算属性会缓存结果, 只有当依赖项发生变化时, 计算属性才会重新计算.1. 无缓存: watch不会缓存数据, 它会在每次依赖的响应式数据变化时执行.
Vue3 （computed函数，watch函数，watchEffect函数）
weixin_61774894的博客
06-06 726
computed函数，watch函数，watchEffect函数
详解vue中computed 和 watch的异同
08-30
在 Vue 中，computed 和 watch 是两个非常重要的概念，它们都可以用来观察页面的数据变化，但是它们之间有着很大的区别。 首先，computed 是一个计算属性，它可以根据依赖项自动更新。例如，在上面的例子中，我们...
Vue的watch和computed方法的使用及区别介绍
10-18
在Vue中，`watch` 和 `computed` 都是用来响应数据变化的机制，但它们之间存在显著的区别。本文将深入探讨这两者的用法和差异。 首先，让我们来看看 `watch`。`watch` 是Vue中用于监听数据变化的工具，它可以执行...
Vue中computed及watch区别实例解析
10-15
在Vue.js框架中，`computed`和`watch`都是用于处理数据变化的机制，但它们在功能和使用场景上存在显著的区别。以下是关于这两个概念的详细解析。 **计算属性（Computed）** 计算属性`computed`主要用于创建基于现有...
深入浅析Vue中的 computed 和 watch
08-27
computed 计算属性是通过属性计算得来的属性，watch属性变化，就会触发监听的函数。下面通过本文给大家介绍Vue中的 computed 和 watch，感兴趣的朋友一起看看吧
Vue中computed、watch、watchEffect的作用与区别
word_tian_的博客
03-29 374
Vue中computed、watch、watchEffect的作用与区别
computed和watch、watchEffect
weixin_42464106的博客
07-06 726
一、computed计算属性 二、watch监听器： 三、watchEffect函数 四、使用场景computed 计算属性 : computed储存需要处理的数据值，依赖其它的属性值，并且 computed 的值有
Vue3：computed计算属性和watch监视以及watchEffect函数原理和用法（含vue2用法）
weixin_50236973的博客
12-13 510
Vue3：computed计算属性和watch监视以及watchEffect函数原理和用法（含vue2用法）
Vue3中computed、watch、watchEffect的区别
JNPF 专注低代码开发
03-12 1095
其实看看源码就好理解了，执行 get 方法时，会把返回值存入 _value ，template 直接从 _value 属性获取数据，在需要更新缓存的时候才会调用 getter，这样就实现了缓存功能。细心的人会发现，开发内部工具的过程中，大量的页面、场景、组件等在不断重复，这种重复造轮子的工作，浪费工程师的大量时间。composition API 的 watch 非常好理解，他是一个函数，第一个参数要指定一个被侦听对象，第二个参数是回调函数，在被侦听的对象发生变化时，执行回调函数。
五、【Vue3】——计算属性与监视（computed&watch&watchEffect）
yifei1234567的博客
04-02 2074
Vue3中的计算属性computed和监视watch与Vue2中的配置功能一致，但监视watch在用的时候却存在两个小坑，而且Vue3出现了watchEffect函数，能够更智能化去监视一个对象，下面与小编一起学习探讨一下吧。
vue3新特性computed,watch,watchEffect函数用法
荔枝吖阿
11-17 2784
使用computed和watch, 一定记得先引入 import { reactive , computed,toRefs,watch} from "vue"; computed属性 使用 getter 函数，并为从 getter 返回的值返回一个不变的响应式ref对象。 如图所示，案例： <p>原来值:{{ count }}</p> <p>计算属性更改的值:{{ twoNumber }}</p> //引用ref函..
vue3的computed属性和watch属性
weixin_56733569的博客
12-09 1244
关于vue3中computed和watch的用法
6. Vue3 计算属性，computed，computed 和methods区别
细致-专业-实操
03-22 808
Vue3 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子： <script setup> // This starter template is using Vue 3 <script setup> SFCs // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup import HelloWorld from './
vue3 watch watcheffect区别
04-29
在 Vue 3 中，watch 和 watchEffect 都是用于监听数据变化的 API，但是它们的实现方式和使用方式略有不同。 watch 选项是一个函数，接收两个参数：新值和旧值，并且可以通过配置选项来控制 watch 的行为。watch 可以监听指定的数据变化，例如一个对象的某个属性或一个数组的某个索引值。当监听的数据变化时，watch 函数就会被调用。 watchEffect 是一个立即执行的函数，它会自动追踪其依赖，并在依赖变化时重新执行。watchEffect 的依赖可以是任何响应式数据，包括 ref、reactive、computed 等，也可以是一个普通的变量或函数。watchEffect 函数中使用的响应式数据会被自动追踪，当这些数据变化时，watchEffect 函数会被重新执行。 总的来说，watch 更适合监听指定的数据变化，而 watchEffect 更适合在函数内部响应式地使用数据。同时，watchEffect 可以更方便地处理异步操作，因为它可以自动追踪异步操作中使用的响应式数据，并在数据变化时重新执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值