一·watch
1.监听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.监听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.监听多个参数
<script>
import {reactive, watch} from 'vue'
export default {
setup() {
const objName = reactive({
name: "LMS",
engName: "Romsen",
});
watch(
[() => objName.name, () => objName.engName],
([curName, preName], [curengName, engpreName]) => {
console.log(curName, curengName);
console.log(preName, engpreName);
}
);
const { name, engName } = toRefs(objName);
return { name, engName };
}
}
</script>
4.immediate：true
watch(
[() => objName.name, () => objName.engName],
([curName, preName], [curengName, engpreName]) => {
console.log(curName, curengName);
console.log(preName, engpreName);
},
{
immediate: true,
}
);
watchEffect
watchEffect(
() => {
console.log(objName.name);
console.log(objName.engName);
});
区别
watch:
- 监听的数据改变之后才会执行，第一次执行时没有数据变化，不会执行
- 使用immediate：true之后，第一次会执行
watchEffect:
- 第一次会执行，依赖改变了也会执行
