vue3的＜scrept setup＞中如何使用computed

该文章是学习时关于vue3中如何使用computed的使用的笔记，会持续更新

一.基本使用

1.引入computed函数

import {computed, ref} from "vue"

2.使用

<template>

  <span>{{data}}</span>

</template>

<script setup>


import {computed, ref} from "vue"


let num = ref(0);

let data = computed(()=>{

   return num.value + 12;
})

</script>

<style>

</style>

3.说明

3.1 Vue 的计算属性会自动追踪响应式依赖。它会检测到 data依赖于 num，所以当 num 改变时，任何依赖于data 的绑定都会同时更新。（改编自官方文档）

3.2

<span>{{dataFun}}</span>


function dataFun(){
  return num.value + 12;
}

3.2.1 这个的效果和计算属性的效果一样 

3.2.2 若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 num 不改变，无论多少次访问 data 都会立即返回先前的计算结果，而不用重复执行 getter 函数。（改编自官方文档）

3.2.3 注意：这个dataFun函数

3.3 

const now = computed(() => Date.now())

下面的计算属性永远不会更新，因为 Date.now() 并不是一个响应式依赖（引用自官方文档）

3.4 计算属性用上getter和setter（下面内容来自官方文档）

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

3.4.1 现在当你再运行 fullName.value = 'John Doe' 时，setter 会被调用而 firstName 和 lastName 会随之更新。

----------------------------------------------------未完待续---------------------------------------------------------------