本文主要是介绍VUE3侦听器:watch与watchEffect的区别与使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、watch与watchEffect的区别
watch 和 watchEffect 都能响应式地执行有副作用（除了返回预期结果外还会简介影响其它数据）的回调。它们之间的主要区别是追踪响应式依赖的方式
-
watch：只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。 -
watchEffect：会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。watchEffect中的
示例：
<script setup lang="ts">
import { ref, watch, watchEffect } from "vue";
const num1 = ref(1);
const num2 = ref(2);
const num3 = ref(3);const calculateTotal = () => {return num1.value + num2.value + num3.value;
};watch(num1, () => {console.log(calculateTotal()); //仅num1变化时触发
});watchEffect(() => {console.log(calculateTotal()); //num1,num2,num3任意一个变化时触发
});
</script>当然，它们还有一些其它区别，这里做一下简单的总结:
watch:
1.只侦听明确的数据。
2.只在侦听数据发生变动时触发。
3.提供变化前后的值。
watchEffect:
1.追踪能访问到的所有响应式属性。
2.初始化时会触发一次。
3.不提供变化前后的值
二、watch使用方式
1.watch使用展示
(1).单个ref侦听
const num1 = ref(0)
watch(num1, (newVlue, oldVlue) => {console.log(newVlue, oldVlue);
});(2).多个ref侦听
const num1 = ref(1);
const num2 = ref(2);watch([num1, num2], (newNum1, newNum2) => {console.log(newNum2, newNum3);
});(3).getter 函数
const num1 = ref(1);
const num2 = ref(2);
watch(() => num1.value + num2.value,(sum) => {console.log(sum);}
);2.侦听响应式对象的注意事项
响应式对象的值需要深度侦听才能得到，在ref侦听中会隐式地创建一个深层侦听器，在getter 函数方式侦听中则需要主动加一个{ deep: true }
const num1 = reactive({ a: 1 });
// 当num1.a从1变为2时
watch(num1, (newNum1, oldNum1) => {console.log(newNum1.a, oldNum1.a); //2，2：可以正常侦听num1.a的变化,但是侦听旧值失败
});
watch(num1.a, (newNum1, oldNum1) => {console.log(newNum1, oldNum1); //报错
});
watch(() => num1,(a) => {console.log(a); //无反应，不能侦听num1的属性值的变化}
);
watch(() => num1.a,(a) => {console.log(a); //可以正常侦听num1.a的变化}
);
watch(() => num1,(num1) => {console.log(num1.a); //2:可以正常侦听num1.a的变化},{ deep: true }//开启深度侦听
);3.即时回调侦听器：{ immediate: true }
当使用watch时需要像watchEffect那样刚开始就执行一次时，可以使用{ immediate: true }
代码演示：
const num1 = ref(1);
watch(num1,(newNum1, oldNum1) => {console.log(newNum1, oldNum1); //1,undefined},{ immediate: true }
);4.一次性侦听器：{ once: true }
当希望只对某个ref只侦听一次时，可以使用{ once: true }
const num1 = ref(1);
watch(num1,(newNum1, oldNum1) => {console.log(newNum1); // 当num1从1变为2时:2,接着num1从2变为3:无反应},{ once: true }
);三、watchEffect使用方式
1.跟踪对象多个属性
watchEffect只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性，对于需要侦听一个对象中多个属性的情况watchEffect比深度侦听效率更高。
const nums = reactive({num1: 1,num2: 2,num3: 3,
});
watchEffect(() => {console.log(nums.num1 + nums.num2 + nums.num3);//num1,num2,num3任意一个变化时触发
});2.响应式数据请求
通过使用watchEffect可以在数据变化时自动发起请求，如下所示，当data变化时会自动发起新的请求
watchEffect(() => {axios.post("https://ljy.com:5000/chat", data).then((res) => {resData.value = res.data;});
});四、watchPostEffect使用方式（dom更新后侦听）
vue的更新是异步的， Vue 的响应式数据发生变化时，Vue 不会立即更新 DOM，而是会等待当前同步任务执行完毕，然后在下一个事件循环的“tick”中执行更新。默认情况下，侦听器回调会在父组件更新 (如有) 之后、所属组件的 DOM 更新之前被调用。这意味着如果你尝试在侦听器回调中访问所属组件的 DOM，那么 DOM 将处于更新前的状态。
<div class="mian" ref="main">{{ a }}</div>
<script setup lang="ts">
import {ref,watchEffect,
} from "vue";
const main = ref<HTMLElement | null>(null);
const a = ref(0);
a.value = 1;
watchEffect(() => {console.log(main.value);//null,<div class="mian" ref="main">1</div>
});
</script>如果想在dom更新后侦听，可以使用watchPostEffect
import { watchPostEffect } from "vue";
watchPostEffect(() => {console.log(main.value);//<div class="mian" ref="main">1</div>
});五、watchSyncEffect使用方式（任何更新之前触发）
watchSyncEffect是个同步侦听器，使用方式如下：
import { watchSyncEffect } from 'vue'watchSyncEffect(() => {/* 在响应式数据变化时同步执行 */
})六、停止侦听器
在 setup() 或 <script setup> 中用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。因此，在大多数情况下，你无需关心怎么停止一个侦听器。
一个关键点是，侦听器必须用同步语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。如
<script setup>
import { watchEffect } from 'vue'// 它会自动停止
watchEffect(() => {})// ...这个则不会！
setTimeout(() => {watchEffect(() => {})
}, 100)
</script>停止侦听器方式：
const unwatch = watchEffect(() => {})// ...当该侦听器不再需要时
unwatch()注意，需要异步创建侦听器的情况很少，请尽可能选择同步创建。如果需要等待一些异步数据，你可以使用条件式的侦听逻辑：
// 需要异步请求得到的数据
const data = ref(null)watchEffect(() => {if (data.value) {// 数据加载后执行某些操作...}
})七、参考文档
侦听器 | Vue.js
这篇关于VUE3侦听器:watch与watchEffect的区别与使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
