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 在响应数据初始化时就会立即执行回调函数。
