Vue3 – computed 组合式API

简介

Vue3 中对于 computed 计算属性进行了组合式API的修改，不再使用对象的形式表示，而是作为 setup 中的组合API的存在。

computed

Vue2 中的 computed

Vue2 中computed 计算属性何用内部对象的方式声明，具体如下：

export default {
  name: 'App',
  data() {
    return {
      firstName: "张",
      lastName: "三"
    }
  },
  computed: {
    // 基于只读的 computed 计算属性
    fullName() {
      return this.firstName + "-" + this.lastName;
    },

    // 基于可读写的 computed 计算属性
    fullName2: {
      get() {
        return this.firstName + "-" + this.lastName;
      },
      set(value) {
        let name = value.split("-");
        this.firstName = name[0];
        this.lastName = name[1];
      }
    }
  },
}

Vue3 中的 computed

Vue3 中，computed 不再使用对象的方式声明，而是通过引入 { computed } 引用，在setup 中定义，其使用方法与Vue2 基本相同，参考下列代码：

// 引用 computed 计算属性的引用
import {computed} from "vue"

export default {
  name: 'App',
  setup(props, context) {

    let person = reactive({
      firstName: "张",
      lastName: "三"
    });

    // 通过只读方式声明计算属性
    let fullName = computed(()=>{
      return person.firstName + "-" + person.lastName;
    });

    // 通过可读可写的方式声明计算属性
    let fullName2 = computed({
      get(){
        return person.firstName + "-" + person.lastName;
      },
      set(value){
        let name = value.split("-");
        person.firstName = name[0];
        person.lastName = name[1];
      }
    });
    
    // 因为Vue3中解决了Vue2中直接赋值不能产生响应式的问题，所以，所计算的属性可以直接赋给 person
    // 这样的话，就不用另外导出 fullName 、fullName2 了,直接导出 person就可以了
    person.fullName = fullName;
    person.fullName2 = fullName2;
    
    return {
      person,
      fullName,
      fullName2
    }
  }
}
展开