watch和watchEffect的区别

watch

概念:

侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。

Vue3中 watch 的使用

import { watch } from “vue”
watch( name , ( newVal , oldVal )=>{ 
//业务处理 
}, options )

共有三个参数,分别为:
name:需要帧听的属性;
(curVal,preVal)=>{ //业务处理 } 箭头函数,是监听到的最新值和本次修改之前的值,此处进行逻辑处理。
options :配置项(是一个对象),对监听器的配置,如:是否深度监听。

watch 特点

watch 监听函数可以添加配置项,也可以配置为空,配置项为空的情况下,watch的特点为:
有惰性:运行的时候,不会立即执行
更加具体:需要添加监听的属性
可访问属性之前的值:回调函数内会返回最新值和修改之前的值
可配置:配置项可补充 watch 特点上的不足
immediate:配置 watch 属性是否立即执行,值为 true 时,一旦运行就会立即执行,值为 false 时,保持惰性
deep:配置 watch 是否深度监听,值为 true 时,可以监听对象所有属性,值为 false 时保持更加具体特性,必须指定到具体的属性上

watchEffect

概念:

立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行。watchEffect比watch更简易易用,但是高度的封装意味着它更抽象,没有watch好理解。

使用

import { watchEffect } from 'vue'
// 上来就回调
watchEffect(()=>{
     const x1 = sum.value
     console.log('watchEffect所指定的回调执行了')
     })

特点总结:

1. 不用指明监视哪个属性,监视的回调中用到哪个属性(会监听所有响应式数据),就会自动追踪哪个属性(和computed类似)
2. 非惰性侦听,(与默认的watch相反),但是在配置对象中没有像immediate这样的属性控制惰性或非惰性侦听,这也意味着非惰性侦听这个特性无法被更改。
3. 最多只有两个参数,第一个参数为副作用函数(可以理解为回调函数),第二个是可选参数为配置对象。不可访问之前的值:只能访问当前最新的值,访问不到修改之前的
4. 返回值是一个用来停止该副作用的函数。(可以理解为停止侦听器)
  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值