013.Vue3入门，计算属性的使用，让模板语法更简洁

1、代码如下：

<template>
  <h3>计算属性</h3>
  <div>{{ func1 }}</div>
  <div>{{ func1 }}</div>
  <div>{{ func1 }}</div>
  <!--  <div>{{ func1() }}</div>-->
  <!--  <div>{{ func1() }}</div>-->
  <!--  <div>{{ func1() }}</div>-->
</template>

<script>
export default {
  data() {
    return {
      people1: {
        name: "张三",
        profession: ["医生", "小护士", "工程师", "骑手"]
      }
    }
  },
  // 将复杂的计算，可以放到计算属性中操作，让代码更简洁，避免重复执行
  computed: {
    func1() {
      console.log(this.people1.profession.length);
      return this.people1.profession.length > 2 ? "Yes" : "No"
    },
  },
  // methods: {
  //   func1() {
  //     console.log(this.people1.profession.length);
  //     return this.people1.profession.length > 0 ? "Yes" : "No"
  //   }
  // }
}
</script>

2、如果在模板中直接执行函数，会多次调用。模板界面复杂难懂。

 3、如果写在计算模板中，那么代码简洁，如下图所示。