watch和watchEffect不深入学习-Vue3学习日记(三)

在vue3中对于数据发生变化进行监听有两种,也就是本文的标题watchwatchEffect

watch

特性

watch 需要侦听特定的数据源,并在回调函数中执行副作用。默认情况下,它也是惰性的,即只有当被侦听的源发生变化时才执行回调

上面这句话来自于官网,个人分析有两个个点需要关注:
* 需要监听特定的数据源,在数据源发生变化的时候执行回调函数
* 默认情况下是惰性的,也就是组件实例化的时候不会执行

特点

  • 更具体地说明什么状态应该触发
  • 访问侦听状态变化前后的值

实例

// 侦听一个 
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {

  }
)
watch(count, (count, prevCount) => {
  /* ... */
})

// 同时监听多个
const firstName = ref('');
const lastName = ref('');

watch([firstName, lastName], (newValues, prevValues) => {
  console.log(newValues, prevValues); // 注意这里拿到的数据也回事数组的形式,所以需要用下标去访问
})

// 监听响应式对象
const nums = reactive([1,2,3])
watch(()=>[...nums],(newVal,oldVal)=>{
  // 注意这里第一个参数是把数组解构了的,这是由于vue3watch监听响应式需要有一个值的副本,我尝试过不用副本,直接执行响应式对象,会报错
})

第三个参数

在上面我们学习了watch的特性和特点以及实例,会注意到一直都是两个参数,其实watch中还有第三个参数。

// 这里不深入展开讨论 
interface WatchEffectOptions {
  flush?: 'pre' | 'post' | 'sync' // 默认:'pre'
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
}
// vue 2.x

watch:{
  state:{
    handler(){},
    immediate: true,// 立即执行
    deep: true  // 深度监听
  }
}


// vue 3.x
watch(
  ()=>[...nums],
  (newVal,oldVal)=>{

  },
  {deep:true}
  )

watchEffect

为了根据响应式状态自动应用和重新应用副作用,我们可以使用 watchEffect 方法。它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。

感觉有点绕,我个人的理解就是,在watchEffect回调函数中vue会自动帮我们追踪依赖,然后在变更的时候运行函数

特点

  • 自动追踪依赖,所以势必默认会在组件实例化的时候执行
  • 不指定数据源

实例

const count = ref(0)

watchEffect(() => console.log(count.value))

// 只要函数中有写依赖,会自动进行追踪

// 停止监听
const stop = watchEffect(() => {
  /* ... */
})

// later
stop()