vue3中的computed用法

计算属性：

        当依赖于一个响应式数据，根据一定螺距得到一个新的数据

不可以直接对计算属性进行修改

计算属性两种用法

1.给computed传入函数，返回值就是计算属性的值

2.给computed传入对象 ，get获取计算属性的值，set监听计算属性改变

高级用法：

        使用computed时使用对象

        通过get函数和set函数，对原始的响应式数据进行更改，间接更改计算属性的值，使计算属性也可以通过v-model双向绑定计算属性

<template>
  <div>
    <div>今年：{{ age }}岁</div>
    <div>后年：{{ newAge }}岁</div>
    <!-- 使用v-model绑定计算属性 -->
    <input type="text" v-model="newAge" />
  </div>
</template>

<script>
import { computed, ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1.计算属性 当依赖于一个响应式数据，根据一定螺距得到一个新的数据
    const age = ref(16)
    // 得到后年的年龄
    // const newAge = computed(() => {
    //   // 该函数的返回值就是计算属性的值
    //   return age.value + 2
    // })
    // 计算属性高级用法
    const newAge = computed({
      // get函数，获取计算属性的值
      get () {
        return age.value + 2
      },
      // set函数，当你给计算属性设置值的时候触发
      set (value) {
        console.log(value);
        age.value = value - 2
      }

    })
    return { age, newAge }
  }
}
</script>

<style>
</style>