Vue 3教程08 - 计算属性

计算属性Computed properties

需要注意计算属性的联动性：当根数据发生变化时，计算属性也会随之而发生变化。

• 更有意义
• 单一位置来处理逻辑，无需复制逻辑

const app = Vue.createApp({
  data() {
    return {
      students: [{
        { id: '9901', name: 'Jessie' },
        { id: '9902', name: 'Lucas' },
        { id: '9903', name: 'William' },
      }]
      // ...
    }
  },
  methods: {
    // ...
  },
  computed: {
    registeredStudents() {
      return this.students.filter( student => student.registered )
    }
  }
})

app.mount('#app')

再比如说，使用计算属性来获取商品总价格：

computed: {
  total() {
    return this.products.reduce((prod, curr) => (total += curr.price), 0);
  }
}

当依赖的变量发生变化时，计算属性会被自动计算。

计算属性和方法的区别

计算属性是被保存在缓存中的，因此其涉及的计算逻辑如果需要多次被使用时，通过计算属性能够大幅度提升性能。而对方法的调用则不存在缓存，因此每次都需要重新计算。当页面中和计算属性不相关的字段发生变化时，Vue不会重新调用计算属性的代码，而是从缓存中取值。但方法就不一样了，每次页面重新渲染都会被重新调用。

更新计算属性值Computed setter

methods: {
  changeFullName() {
    this.fullName = 'Luosi Coding';
  }
},
computed: {
  fullName: {
    get() {
      return `${this.firstName} ${lastName}`;
    },
    set(value) {
      const names = value.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    }
  }
}