Vue3计算属性基础使用

一、Vue3计算属性 1.Vue3计算属性基础使用 当我们需要针对一些数据进行一些逻辑运算时可以使用模板中的表达式如下：

<script setup >
import { reactive } from "vue";
const one = reactive({
  name: "Sam Xiaoguai",
  chineseName: [
     "1111",
    "22222"
  ]
});
</script>
<template>
  <div>
    {{ one.chineseName.length > 0 ? "A" : "B" }}
  </div>
</template>

但是如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此我们可以使用计算属性computed() 方法来描述依赖响应式状态的复杂逻辑，返回值为一个计算属性 ref。

<script setup >
import { reactive,computed } from "vue";
const one = reactive({
  name: "Sam Xiaoguai",
  chineseName: [
    "1111",
    "22222"
  ]
});
// 一个计算属性 ref
const haveChineseName = computed(() => {
  return one.chineseName.length > 0 ? "A" : "B"
})
</script>

<template>
  <div>
    {{ haveChineseName }}
  </div>
</template>