vue3快速入门-computed计算属性

本系列文章合集click me

本系列文章源码click me

作用

1. 简化代码，直接计算得出想要使用的数据
2. 计算属性可以依赖多个数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
3. 计算属性相比methods方法会进行缓存，如果多次使用时，计算属性只会调用一次；而方法会使用一次则调用一次，因此计算属性相对而言性能更好。
4. 接收计算属性结果的变量可以直接在HTML模板中通过插值语法使用

使用

vue2

computed:{
  sum(){
    return this.num1 + this.num2;
  }
}

vue3

<template>
  <div id="app">
    <div>名称：<input type="text" v-model="name" /></div>
    <div>年龄：<input type="text" v-model="age" /></div>
    <div>介绍：<input type="text" v-model="info" readonly/></div>
    <div>出生：<input type="text" v-model.number="startYear" /></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "vue";

export default defineComponent({
  setup() {
    // 名称
    const name = ref("温情");
    // 年龄
    const age = ref(0);
    // 介绍
    const info = computed(() => {
      return `名称为${name.value}; 现在${age.value}岁`;
    })
    // 出生年份
    const startYear = computed({
      get() {
        return startYear.value || new Date().getFullYear();
      },
      set(val: number) {
        console.log('触发startYear的set函数', val);
      }
    })

    return { name, startYear, age, info };
  },
});
</script>

#app {
  height: 300px;
  display: flex;
  flex-direction: column;
}


input {
  margin: 10px 0;
  width: 200px;
}