阅读数:135 评论数:0

一、概述

watchEffect和watch都是监听器，但在写法和使用上有所区别。

• watch- 显式指定依赖源，依赖源更新时执行回调函数
• watchEffect - 自动收集依赖源，依赖源更新时重新执行自身

1、watch在监听ref和reactive类型时写法有所不同

import { watch } from 'vue'

// 监听
watch(
  source, // 必传，要侦听的数据源
  callback // 必传，侦听到变化后要执行的回调函数
  // options // 可选，一些侦听选项
  //{
	//	immediate: false,// 不立刻监听，即刚进来第一次不监听，第二次变化时才开始监听操作
		//deep: true // 深度监听
	//}
)

（1）watch监听ref类型

<script>
import {ref, watch} from 'vue'
export default {
    setup() { 
        const state = ref(0)

        watch(state, (newValue, oldValue) => {
          console.log(`原值为${oldValue}`)
          console.log(`新值为${newValue}`)
          /* 1秒后打印结果：
                  原值为0
                  新值为1
          */
        })

        // 1秒后将state值+1
        setTimeout(() => {
          state.value ++
        }, 1000)
    }
}
</script>

（2）watch监听reactive类型时

<script>
import {reactive, watch} from 'vue'
export default {
    setup() { 
        const state = reactive({count: 0})

        watch(() => state.count, (newValue, oldValue) => {
          console.log(`原值为${oldValue}`)
          console.log(`新值为${newValue}`)
          /* 1秒后打印结果：
                  原值为0
                  新值为1
          */
        })

        // 1秒后将state.count的值+1
        setTimeout(() => {
          state.count ++
        }, 1000)
    }
}
</script>

（3）监听多个数据源

watch(
  [() => state.count, count], 
  ([curCount, newVal], [preCount, oldVal]) => {
    console.log("新值:", curCount, "老值:", preCount); console.log("新值:", newVal,
"老值:", oldVal); }
);

2、watchEffect与watch的区别

（1）不需要手动传入依赖

（2）每次初始化时会执行一次回调函数和自动获取依赖

（3）无法获取到原值，只能得到变化后的值。

二、watchEffect的使用

1、基本使用

在组件初始化时， 会先执行一次来收集依赖，与watch的immediate类似。 然后当收集到的依赖中数据发生变化时， 就会再次执行回调函数。

watchEffect(() => {
    console.log(`当${sum.person.age}的值变化的时候调用，初始化
    的时候也调用一次
     `)
}) 

2、onInvalidate

清除副作用，就是在触发监听之前会调用一个函数可以处理你的逻辑

watchEffect(onInvalidate => {
    console.log(`${sum.person.age} 的值变化了！`)
    onInvalidate(() => {
        console.log('清除函数执行了！')
    })
},{
    //'pre' 在组件更新前运行,默认为'pre'
    //'post'在组件更新后运行，watchPostEffect
    //'sync'强制效果始终同步触发。然而，这是低效的，应该很少需要。watchSyncEffect
    flush:'post'
})