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. 返回值是一个用来停止该副作用的函数。(可以理解为停止侦听器)