浅谈vue3中effect与computed的亲密关系

什么是effect和computed

在vue3中，effect和computed是两种常用的API。effect是用来观察响应式状态的变化，而computed是用来派生一个新的响应式状态，根据已有的响应式状态计算出新的响应式状态的值。

effect

下面是一个简单的示例，演示了如何通过effect去观察响应式状态的变化：

import { effect, reactive } from 'vue'

const state = reactive({
  count: 0
})

effect(() => {
  console.log(state.count)
})

state.count++
// 控制台输出:
// 0
// 1

effect接受一个包含响应式状态读取操作的函数，如果其中的状态发生变化，那么这个函数就会被重新执行。

computed

下面是一个简单的示例，演示了如何通过computed去派生新的响应式状态：

import { computed, reactive, toRefs } from 'vue'

const state = reactive({
  count: 0
})

const doubleCount = computed(() => {
  return state.count * 2
})

console.log(doubleCount.value) // 0

state.count++
console.log(doubleCount.value) // 2

computed接受一个计算函数，这个函数中的所有响应式状态都会被自动追踪，如果其中的状态发生变化，那么这个计算函数就会被重新执行。

effect与computed之间的关系

effect和computed之间有一个很亲密的关系，就是在computed中使用到的响应式状态，会被自动追踪，即使这个响应式状态是在effect中被修改的。下面是一个示例：

import { computed, effect, reactive, toRefs } from 'vue'

const state = reactive({
  count: 0
})

effect(() => {
  state.count++
})

const doubleCount = computed(() => {
  return state.count * 2
})

console.log(doubleCount.value) // 2
console.log(doubleCount.value) // 4
console.log(doubleCount.value) // 6

我的理解是，在执行computed时，会对其中依赖的响应式状态进行绑定，这个绑定感觉类似于一个依赖于关系。如果这个响应式状态在计算函数执行过程中发生了变化，那么这个计算函数就会被重新执行。

但是在执行effect时，实际上也是会进行响应式状态追踪的，只是没有像computed一样绑定到计算函数上。

computed的高级用法

之前提到过，computed是派生一个新的响应式状态，这个新的响应式状态的值，是基于已有的响应式状态计算出来的。computed的计算函数，可以类比为计算属性。同样的，计算函数中也支持getter和setter。

下面是一个示例，演示computed的高级用法：

import { computed, reactive } from 'vue'

const state = reactive({
  count: 0
})

const doubleCount = computed({
  get: () => state.count * 2,
  set: (value) => {
    state.count = value / 2
  }
})

console.log(doubleCount.value) // 0

doubleCount.value = 10
console.log(state.count) // 5
console.log(doubleCount.value) // 10

在这个示例中，computed接受一个对象参数，其中包含了get和set方法。get方法用于计算新的响应式状态，set方法用于更新已有的响应式状态。在这个示例中，doubleCount既可以当做计算属性使用，也可以当做响应式状态使用，可以通过赋值的方式修改它，也可以观察它的变化。

总结

在vue3中，effect和computed是非常常用的API，它们可以用于观察响应式状态的变化和派生新的响应式状态。它们之间存在亲密关系，因为computed的计算函数中使用的响应式状态，会被自动追踪，而且即使这个响应式状态是在effect中被修改的。除此之外，computed还有一些高级用法，可以类比为计算属性，具有getter和setter。