浅聊一下watch监听器 都能实现功能 计算属性和方法，监听器如何去做选择呢？
哈喽哈喽，大家好。我是你们的金樽清酒。今天我要给大家分享一下vue中的watch监听器。它是干什么的呢？怎么去使用呢？它跟计算属性有什么区别呢？
watch 的作用和特性
-
watch的作用 watch是用来干嘛的呢？我们知道，计算属性是可以根据响应数据源来得到一个计算的值，所以它的返回结果一定是一个值。那要是我们需要在数据源发生变化的时候去完成一些业务逻辑呢？这个时候我们是不是就不只是满足于得到一个值啦，而是完成一个更加复杂的逻辑。
-
watch的用法和特性 1.在组合式api中，我们用watch去触发回调函数，回调函数里面有两个参数，一个代表闲杂的值，一个代表以前的值。让我们看一下代码，打印看一下。
js
<template>
<div>
<h2>{{ title }}</h2>
<h2> {{ totalPrice }} </h2>
<button @click="addCount">add</button>
</div>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
const title = ref("物品的价格")
const price = ref("100")
const count = ref(2)
const totalPrice = computed(() => price.value * count.value, console.log("1"))
watch(count, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
const addCount = () => {
count.value++
}
</script>
<style lang="scss" scoped></style>在代码15行到17行，watch函数监听了变量count的值。并触发了后面的回调函数。里面的参数就代表了count现在的值和以前的值。让我们看一下效果。
在我点击一下按钮的时候，count由2变为3，打印出来为3 2。
watch 和computed的区别
既然watch和computed都能根据响应式数据源的变化而变化。那么有些computed的功能watch也能完成。那两者有什么区别呢？
注意！！！两者还是有较大的区别的
- 1.watch里面是回调函数，它是一个方法，可以用来写业务代码，而computed必须返回一个值。所以在都能完成一个功能的时候选computed。它能直接返回一个值，更加的简单。而方法也能完成这个功能，也选择computed，因为computed有缓存，不用重复的调用方法。
- 2.computed在页面渲染的时候就会触发而watch只有在数据源发生变化的时候才会触发。让我们看一下。 还是上面的代码，在页面渲染的时候打印的是computed里面的1，而当我们点击按钮的时候，watch才开始打印。
这就是二者的一点区别。
总结
watch也可以洞察到数据源的变化。但是它会触发一个回调函数来让我们写业务代码。而computed必须返回一个值，不能写业务代码，更好用于计算。所以在方法和computed能完成同一个功能时用computed，因为computed有缓存。在watch和computed完成一个功能时，用computed，因为更简洁。当然computed的不能完成的功能肯定是用方法和watch来完成。
假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！"