Vue-计算属性

从vue框架中导入方法computed，其修饰一个响应式数据的属性

compute中文释义：计算

使用computed修饰一个函数，其返回值为该属性的值，该属性为响应式属性，该属性被称之为计算属性

通过计算属性获得数据，每次使用时，对比上次使用时的数据变化，如果改变就重新计算，如果没有改变则直接使用上一次的结果

当结果需要大量且复杂的运算时，就需要用到computed的计算属性

我们后端程序员在写前端代码时，更贴近业务，不需要复杂大量的运算，所以大概率用不到他 😓

<script setup>
import { reactive, computed } from "vue";
const boy = reactive({
  name: "xiaobai",
  girlfriends: ["lili", "feifei", "xuexue", "cuihua"],
});

function hasGirlfriends() {
  return boy.girlfriends.length > 0 ? "是" : "否";
}
let gfNumber = computed(() => {
  return boy.girlfriends.length > 0 ? "是" : "否";
});
</script>

<template>
  <div>
    {{ hasGirlfriends() }}
    {{ gfNumber }}
  </div>
</template>

<style scoped>
</style>