当前位置：首页 > news >正文

vue3 computed与watch，watchEffect比较

news 2025/7/9 6:54:57

相同点

都是要根据一个或多个响应式数据进行监听

不同点

computed 如要return回来一个新的响应式值，且这个值不允许直接修改，想要修改的话可以设置set函数，在函数里面去修改所依赖的响应式数据，然后计算属性值会基于其响应式依赖被缓存
watch 监听一个或多个响应式数据，当数据发生变化的时候可以去做一些修改其他值，执行异步操作，如发送求情,修改dom,然后watch默认是懒侦听的，也就是说刚进入页面的时候不会触发，仅在侦听源发生变化的时候才会执行回调函数，这个时候我们可以设置immediate为true，这表示在侦听器创建时立即触发回调，如果侦听源是对象，我们想做深层次侦听我们需要设置deep为true

computed

接受一个getter函数，返回一个只读的响应式ref对象该ref对象通过.value暴漏getter函数的返回值

<script setup lang="ts">const a = ref('小明');const b = ref('小红');const c = computed(() => `${a.value}_${b.value}`);
</script><template>{{ c }}
</template>

这个时候页面上会显示 小明_小红
这个时候也不知道有了个什么样的需求，我想要给c赋值，如c.value = 小花
在这里插入图片描述
可以看到是不行的，因为这个时候computed返回的只是一个只读的ref，接着往下看

<script setup lang="ts">const a = ref('小明');const b = ref('小红');const c = computed({get() {return `${a.value}_${b.value}`;},set(val) {console.log(val);},});const changeC = () => {c.value = '小花';};
</script><template>{{ c }}<a-button @click="changeC">改变C</a-button>
</template>

这个时候点击按钮后，可以看到控制台会输出小花,这个时候你可以做一些操作比如
在这里插入图片描述
这个时候页面上就会展示

vue的计算属性会自动追踪响应式依赖，它会检测到c依赖于a,b，也就是说当a或者b改变时，c就会同时更新
计算属性值会基于其响应式依赖被缓存 一个计算属性仅在其响应式依赖更新时才重新计算，这意味着a或b不改变，无论访问c多少次都会立即返回先前计算的结果，而不用重复执行getter函数
getter不应有副作用，也就是说不要在计算属性里面去改变其他状态，不要在getter中去做异步请求以及改变dom，如果有这种需求则要到watch去操作
避免直接修改计算属性值，如果想要修改计算属性的值，应该去更新它所依赖的响应式字段，也就是说我们想要改变c那么我们应该想的是如何去改变a和b

watch

侦听一个或多个响应式数据源，并在数据变化时调用所给的回调函数

const x = ref(0)
const y = ref(0)// 单个 ref
watch(x, (newX) => {console.log(`x is ${newX}`)
})// getter 函数
watch(() => x.value + y.value,(sum) => {console.log(`sum of x + y is: ${sum}`)}
)// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {console.log(`x is ${newX} and y is ${newY}`)
})

如果有以下需求
在这里插入图片描述
要是用

<script setup lang="ts">const obj = reactive({count: 0,});watch(// 提供一个getter函数() => obj.count,count => {console.log('做一些操作');});
</script>

在这里插入图片描述

watchEffect

我的理解就是，比如说我们要监听一个id发生变化的时候，我们要去请求一个接口获取详情
用watch的写法

const todoId = ref(1)
const data = ref(null)watch(todoId,async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()},{ immediate: true }
)

我们需要监听todoId，然后…
现在如果使用watchEffect，可以这样写

watchEffect(async () => {const response = await fetch(// 逻辑里面必须要有todoId的使用，否则todoId变化了，也不会监听`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()
})