目录
1. 两者区别
- 两者都可监听 data 属性变化
- watch 需要明确监听哪个属性
- watchEffect 会根据其中的属性，自动监听其变化
2. wacth
- 第一个参数，确定要监听哪个属性
- 第二个参数，回调函数
- 第三个参数，配置项
immediate: true, // 初始化之前就监听，可选
deep: true // 深度监听
代码演示
<template>
<p>watch vs watchEffect</p>
<p>{
{ numberRef }}</p>
<p>{
{ name }} {
{ age }}</p>
</template>
<script>
import { reactive, ref, toRefs, watch } from 'vue'
export default {
name: 'WatchEffect',
setup () {
const numberRef = ref(100)
const state = reactive({
name: 'zhangsan',
age: 23
})
watch(numberRef, (newNumer, oldNumber) => {
console.log('ref watch', newNumer, oldNumber)
}, {
// immediate: true // 初始化之前就监听，可选
})
setTimeout(() => {
numberRef.value = 200
}, 2000)
watch(
// 第一个参数，确定要监听哪个属性
() => state.age,
// 第二个参数，回调函数
(newAge, oldAge) => {
console.log('state watch', newAge, oldAge)
},
// 第三个参数，配置项
{
immediate: true, // 初始化之前就监听，可选
deep: true // 深度监听
}
)
setTimeout(() => {
state.age = 12
}, 1500)
setTimeout(() => {
state.name = 'lisi' // 不监听
}, 2000)3. watchEffect
- 初始化时，一定会执行一次（收集需要监听的数据）
代码演示
<template>
<p>watch vs watchEffect</p>
<p>{
{ numberRef }}</p>
<p>{
{ name }} {
{ age }}</p>
</template>
<script>
import { reactive, ref, toRefs, watchEffect } from 'vue'
export default {
name: 'WatchEffect',
setup () {
const numberRef = ref(100)
const state = reactive({
name: 'zhangsan',
age: 23
})
watchEffect(() => {
// 初始化时，一定会执行一次（收集需要监听的数据）
console.log('state.name', state.name)
})
setTimeout(() => {
state.age = 12
}, 1500)
setTimeout(() => {
state.name = 'lisi' // 不监听
}, 2000)
return {
numberRef,
...toRefs(state)
}
}
}
</script>