vue3 setout 使用 computed

在Vue 3中，可以使用`computed`函数来创建计算属性。计算属性是根据其他响应式数据进行计算得到的属性，当依赖的数据发生变化时，计算属性会自动更新。

下面是一个使用`computed`的示例代码：

import { ref, computed } from 'vue'

const num = ref(1)

setTimeout(() => {
  num.value++
}, 1000)

const newNum = computed(() => {
  return 'ref:num值=' + num.value
})

console.log(newNum.value) // 输出：ref:num值=1

setTimeout(() => {
  console.log(newNum.value) // 输出：ref:num值=2
}, 2000)

在上面的代码中，我们创建了一个响应式数据`num`，并使用`computed`函数创建了一个计算属性`newNum`。计算属性的值是根据`num`的值进行计算得到的。当`num`的值发生变化时，`newNum`会自动更新。

在示例代码中，我们通过`setTimeout`函数模拟了`num`的值在1秒后增加1的操作。在第一次打印`newNum.value`时，输出的值是`ref:num值=1`。在第二次打印`newNum.value`时，输出的值是`ref:num值=2`，说明计算属性的值随着依赖的数据变化而更新。