作用

解决模板中复杂的逻辑运算以及复用的问题

逻辑样式尽可能的绝对分离

const App = {
  data() {
    return {
      studentCount: 1
    }
  },
  template: `
    <h1>{{ studentCount > 0 ? ('学生数：' + studentCount) : '暂无学生' }}</h1>
  `
}

Vue.createApp(App).mount('#app');

模板中多次使用同样的插值表达式

避免多次计算，只要data下属性不改变，只会计算一次，也就是缓存

const App = {
  data() {
    return {
      studentCount: 1
    }
  },
  template: `
    <h1>{{ studentCountInfo }}</h1>
    <h1>{{ studentCountInfo }}</h1>
  `,
  computed: {
    studentCountInfo() {
      console.log('Invoked');
      return this.studentCount > 0
                            ? ('学生数：' + this.studentCount)
                            : '暂无学生';
    }
  }
}

Vue.createApp(App).mount('#app');

特性

• 计算属性只在内部逻辑依赖的数据发生变化的时候才会被再次调用
• 计算属性会缓存其依赖的上一次计算出的数据结果
• 多次复用一个相同的数据，计算属性只会调用一次
• 计算属性直接挂载在实例上

使用方式

const vm = new Vue({
  data() {
    return {
      name: 'Lance',
      age: 28
    }
  },
  computed: {
    // 默认为 getter
    getName() {
      return this.name;
    },
    // getter、setter 配合使用
    ageData: {
      get() {
        return this.age;
      },
      set(newVal) {
        this.age = newVal;
      }
    }
  }
});

代码实现

实现思路

• 根据 computed 特性来思考
  • 数据得缓存
    • 得有个地方保存每次计算后的结果
  • get函数中的依赖发生变化后，就得重新计算
    • 所以得把这些依赖收集起来
  • 监听到依赖变化后得更新
    • 还得保存get函数
• 思路：
  • computedPool
    • 有一个 pool 存所有 computed
    • pool 中每个 computed 都是个对象，包含
      • value：缓存计算结果
      • get：保存 get 函数
      • dep：收集函数中的依赖

代码实现