computed和watch的区别

思路

• computed定义
• watch定义
• 区别
• 使用场景
• 原理

computed特性

• 它支持缓存，只有所依赖的数据发生了变化，才会重新计算。
• 不支持异步，如有异步操作时，无法监听数据的变化。
• computed可以有返回值

<script setup lang="ts">
// 04-computed和watch的区别
import { ref, computed } from 'vue'
let count = ref(0)
const countComputed = computed(() => {
  console.log("计算属性触发"); //1.当页面初始渲染时会触发  2.当所依赖的值发生变化会触发
  return count.value * 2
})

const add = () => {
  count.value = 1 
}
</script>
<template>
  <div>
    <button @click="add">+</button>
    <div>
      数字：{{ countComputed }}
    </div>
  </div>
</template>

watch特性

参考：cn.vuejs.org/api/reactiv…

• watch没有返回值
• 它不支持缓存，侦听源发生变化时才执行回调函数。
• 支持异步监听。
• 这个回调函数接受三个参数：新值、旧值，回调函数
• 第三个可选的参数是一个对象，支持以下这些选项：
  • immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
  • deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考深层侦听器。
  • flush：调整回调函数的刷新时机。参考回调的刷新时机及 watchEffect()。
  • onTrack / onTrigger：调试侦听器的依赖。参考调试侦听器。

<script setup lang="ts">
// 04-computed和watch的区别
import { ref, computed, watch } from 'vue'
let count = ref(0)
const add = () => {
  count.value = 1
}
watch(
  () => count.value,
  (newVal, prevVal) => {
    console.log('修改最新的值:' + newVal)
    console.log('修改之前的值:' + prevVal)
  },
  { deep: true /*深度监听*/, immediate: true /*在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。*/}
)
</script>

<template></template>
<style scoped lang="scss"></style>

区别

• computed支持异步，watch不支持异步。
• computed有缓存，只有当所依赖的数据发生变化，才会触发相应的回调。watch无缓存性，更多的是观察的作用，每当监听的数据变化时都会执行回调进行后续操作。

使用场景

• 当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。
• 当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

原理 略