watch 和 watchEffect 的区别
watchEffect 是新特性
- 两者都可以监听 data 属性变化
- watch 需要明确监听哪个属性
- watchEffect 会根据其中的属性,自动监听其变化
例子
js
<template>
<p>watch vs watchEffect {{ numberRef }} {{ name }} {{ age }}</p>
</template>
<script>
import {reactive, ref, toRefs, watch, watchEffect} from "vue";
export default {
name: "Watch",
setup() {
const numberRef = ref(100)
const state = reactive({
name: 'lzw.',
age: 20
})
// ==== watch =====
watch(numberRef, (newVal, oldVal) => {
console.log('ref watch', newVal, oldVal) // ref watch 100 undefined
}, {
// immediate: true,// 初始化之前就监听,可选
})
watch(
// 参数一,要监听的属性
() => state.age,
// 参数二,回调函数
(newAge, oldAge) => {
console.log('state watch', newAge, oldAge) // state watch 25 20
},
// 参数三,配置项
{
immediate: true, // 初始化之前就监听,可选
deep: true // 深度监听
}
)
// ==== watchEffect =====
watchEffect(() => {
// 初始化时,一定会执行一次(收集要监听的数据)
console.log('hello watchEffect')
// 自动监听 state.name
console.log('state.name', state.name) // state.name lzw.A
})
setTimeout(() => {
state.age = 25
}, 1000)
setTimeout(() => {
state.name = 'lzw.A'
}, 1000)
return {
numberRef,
...toRefs(state)
}
}
}
</script>