vue3 computed函数

vue3 的计算属性相对于，vue2来说没什么太大的变化

注意 ：

1.computed 用的是时候也需要从vue上引入

import { computed } from "vue";

2.computed 需要写在setup 里面 （不推荐 ：当然你如果要想跟vue2一样写在外面也是可以，不过毕竟是vue3嘛，就要用最新的写法）

以下就是我得demo

使用：

如果只是简单的使用，直接用一个新名字去接受computed包裹的函数，内容就是用依赖的数据生成新的状态就可以，名字跟之前一直可以在Dom直接使用

如果想要改变计算属性的时候，其依赖属性也响应，就需要用到get（） set（）

总体来说比较简单我就不赘述了 ，直接看代码吧

<template>
  <h1>{{ info.age }}</h1>
  姓：<input v-model="info.xing" /> 名：<input v-model="info.ming" /><br>
  全名 : <span>{{info.oneName}}</span>
  全名 : <input v-model="info.oneName" />
</template>

<script>
import { computed, reactive } from "vue";
export default {
  name: "ComputedDemo",

  setup() {
    let info = reactive({
      name: "小蜜瓜",
      xing: "王",
      ming: "延欣",
      likeGirl: ["宋佳", "刘浩存"],
      age: 12,
      obj: {
        name: "南瓜",
        sex: "女",
      },
    });
    //计算属性简写的情况(不考虑读写)
    info.oneName = computed(() => {
      return info.xing + "-" + info.ming;
    });
    //计算属性变化，计算属性的依赖属性也变化
    info.oneName = computed({
      get(){
        return info.xing + "-" + info.ming;
      },
      set(val){
        const valueArr = val.split('-')
        info.xing = valueArr[0]
        info.ming = valueArr[1]
      }
    });
    return {
      info,

    };
  },
};
</script>

<style>
</style>