【Vue3基础】计算属性

一、需求

二、代码

1、创建项目

创建项目：
1、 npm init vue@latest
2、一路回车
3、输入项目名，不要大写，如vue3bilibili
4、 cd vue3bilibili
5、 npm install
6、npm run dev启动，可以获取网址

2、App.vue文件中：

<script setup>
import studyDemo from "./components/studyDemo.vue"

</script>
<template>
  <studyDemo/>
</template>

3、studyDemo.vue文件

<template>
    <h3>{{ study.name }}</h3>
    <p>{{ study.course.length>0?'Yes':'No' }}</p>
  </template>
  
  <script>
  export default{
    data(){
      return{
        study:{
          name:"初中",
          course:["数学","物理","化学"]
        }
      }
    }
  }
  </script>
  

用计算属性来处理逻辑，注意引用时不用加括号，写名称即可；
若放函数或者方法，引用时注意加括号。

重点区别:
计算属性:计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。
方法: 方法调用总是会在重染发生时再次执行函数。

<template>
    <h3>{{ study.name }}</h3>
    <p>{{ Count }}</p>
    <p>{{ Count2() }}</p>
  </template>
  
  <script>
  export default{
    data(){
      return{
        study:{
          name:"初中",
          course:["数学","物理","化学"]
        }
      }
    },
    //计算属性
    computed:{
        Count(){
            return this.study.course.length>0?'Yes':'No' ;
        }
    },
    //放函数或者方法
    methods:{
        Count2(){
            return this.study.course.length>0?'Yes':'No' ;
        }
    } 
  }
  </script>
  

浏览器运行结果：

三、链接

1、学习视频https://www.bilibili.com/video/BV1Rs4y127j8?p=7&spm_id_from=pageDriver&vd_source=841fee104972680a6cac4dbdbf144b50