Vue3 computed初始化获取设置值实现示例

首先，让我们了解Vue3中computed的使用方式。 在Vue3中，computed不再是选项，它变成了函数。 计算属性的本质仍然是基于依赖项进行缓存的值，但现在您必须显式地自定义getter和setter函数。

创建Computed属性

要创建计算属性，请将一个函数传递给computed()函数。该函数被定义为getter函数，在计算属性的依赖项发生更改时，该getter函数会被重新计算。

下面是一个计算属性的示例代码：

import { computed } from 'vue'

const exampleValue = 2;
const computedValue = computed(() => {
  return exampleValue * 2;
})

console.log(computedValue.value) // 4

exampleValue = 4;
console.log(computedValue.value) // 8

在此示例中，我们创建了一个名为computedValue的计算属性，它的值是exampleValue的两倍。我们可以通过computedValue.value来访问该属性的值。 计算属性将保持更新，只要它所依赖的任何值发生更改。

computed属性的初始化

您可以在计算属性的getter函数中执行一次性初始化，来设置默认值。您可以这样实现：

import { computed } from 'vue'

const exampleValue = 2;
const computedValue = computed(() => {
  if (!computedValue.initialized) {
    computedValue.value = exampleValue * 2;
    computedValue.initialized = true;
  }
  return computedValue.value;
})

console.log(computedValue.value) // 4

exampleValue = 4;
console.log(computedValue.value) // 4

在这个例子中，我们在getter函数中添加了一个检查，以检查computed属性是否已经进行了初始化。 如果尚未进行初始化，则我们设置了computedValue.value的初始值，并将initialized设置为true。 在执行此操作后，我们仅返回computedValue.value的当前值

存在依赖项时computed属性的设置值实现

在Vue3中，使用计算属性的setter更新计算属性的值。 setter函数接收新的值并更新计算属性值。下面是一个计算属性的setter示例：

import { computed } from 'vue'

const exampleValue = 2;
const computedValue = computed({
  get: () => {
    return exampleValue * 2;
  },
  set: (newVal) => {
    exampleValue = newVal / 2;
  }
})

console.log(computedValue.value) // 4

computedValue.value = 8;
console.log(exampleValue) // 4

在此示例中，我们创建了一个名为computedValue的计算属性，它基于exampleValue的值。 setter函数被定义为将新值除以2的函数，以更新exampleValue。

总结：

在Vue3中computed不再是选项，它变成了函数。计算属性的本质仍然是基于依赖项进行缓存的值，但现在您必须显式地自定义getter和setter函数。要创建计算属性，请将一个函数传递给computed()函数。计算属性将保持更新，只要它所依赖的任何值发生更改。您可以在计算属性的getter函数中执行一次性初始化，来设置默认值。setter函数接收新的值并更新计算属性值。