watch 和 watchEffect 的区别
watch 基本使用
watch监听响应式状态发生变化的，当响应式状态发生变化时，都会触发一个回调函数。
<template>
<p>{{ message }}</p>
<button @click="changeMsg">更改 message</button>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const message = ref("学习vue3");
watch(message, (newValue, oldValue) => {
console.log("新的值:", newValue);
console.log("旧的值:", oldValue);
});
const changeMsg = () => {
message.value = "张三";
};
</script>
以上代码中我们点击按钮就会更改响应式变量 message 的值。我们又使用 watch 监听器监听了 message 变量，当它发生变化时，就会触发 watch 监听函数中的回调函数，并且回调函数默认接收两个参数：新值和旧值。
注意：当我们第一进入页面时，watch 监听函数的回调函数是不会执行的。
watch 监听类型
- ref 和计算属性 可以监听计算属性
const message = ref("学习vue3");
const newMessage = computed(() => {
return message.value;
});
watch(newMessage, (newValue, oldValue) => {
console.log("新的值:", newValue);
console.log("旧的值:", oldValue);
});
当我们 message 发生变化时，计算属性 newMessage 也会重新计算得出新的结果，我们 watch 监听函数是可以监听到计算属性变化的。
- getter 函数
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<p>{{ message }}</p>
<p>{{ x1 + x2 }}</p>
<button @click="changeMsg">更改 message</button>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const message = ref("学习vue3");
const x1 = ref(12);
const x2 = ref(13);
watch(
() => x1.value + x2.value,
(newValue, oldValue) => {
console.log("新的值:", newValue);
console.log("旧的值:", oldValue);
}
);
const changeMsg = () => {
message.value = "张三";
x1.value = 14;
x2.value = 23;
};
</script>
watchEffect
watchEffect 也是一个监听器，只不过它不会像 watch 那样接收一个明确的数据源，它只接收一个回调函数。而在这个回调函数当中，它会自动监听响应数据，当回调函数里面的响应数据发生变化，回调函数就会立即执行。
const number = reactive({ count: 0 });
const countAdd = () => {
number.count++;
};
watchEffect(()=>{
console.log("新的值:", number.count);
})
以上代码中，当我们第一次进入页面时，number 响应数据从无到有，这个时候就会触发 watchEffect 的回调函数，因为在 watchEffect 回调函数中使用了 number 响应数据，所以它会自动跟踪 number 数据的变化。当我们点击按钮更改 count 的值时，watchEffect 中的回调函数便会再次执行。
watch 和 watchEffect 区别
- watch 和 watchEffect 都能监听响应式数据的变化，不同的是它们监听数据变化的方式不同。
- watch 会明确监听某一个响应数据，而 watchEffect 则是隐式的监听回调函数中响应数据。
- watch 在响应数据初始化时是不会执行回调函数的，watchEffect 在响应数据初始化时就会立即执行回调函数。
评论(0)