什么是计算属性

解决模板中复杂的逻辑运算及复用问题
计算属性只在内部逻辑依赖的数据发生变化的时候才会被再次调用，它会缓存其依赖的上一次计算出的数据结果
多次复用一个相同值的数据，计算属性只调用一次

直接把计算属性的结果挂载到 vm 上

  1. const App = {
  2.     data() {
  3.       return {
  4.         studentCount: 1
  5.     }
  6.   },
  7.   /*
  8.    * 1. 模板逻辑样式尽可能的绝对分离
  9.    * 2. 逻辑运算结果需要被复用
  10.    */
  11.   /*
  12.    template: `
  13.         <h1>{{ studentCount > 0 ? ('学生数：' + studentCount) : '暂无学生' }}</h1>
  14.         <h2>{{ studentCount > 0 ? ('学生数：' + studentCount) : '暂无学生' }}</h2>
  15.     `,
  16.   */
  17.   template: `
  18.         <h1>{{ studentCountInfo }}</h1>
  19.         <h2>{{ studentCountInfo }}</h2>
  20.     `,
  21.   computed: {
  22.       studentCountInfo () {
  23.       console.log('Invoked');
  24.         return this.studentCount > 0 
  25.                                                      ? ('学生数：' + this.studentCount) 
  26.                                                        : '暂无学生'
  27.     }
  28.   }
  29. }
  31. const vm = Vue.createApp(App).mount('#app');

默认 function 是对应 getter
可以用对象显式定义 getter 和 setter 的方法

  1. {
  2.   data() {
  3.       return {
  4.         test: 123
  5.     }
  6.   },
  7.     computed: {
  8.       a() {
  9.         return this.test;
  10.     },
  11.     b: {
  12.         get() {
  13.           return this.test * 2;
  14.       },
  15.       set(newValue) {
  16.           this.test = newValue + 1;
  17.       }
  18.     }
  19.   }
  20. }

应用场景

  1. 模板逻辑样式尽可能的绝对分离
  2. 逻辑运算结果需要被复用