vue3 computed与watch，watchEffect比较

相同点

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

不同点

• 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()
})