深刻淺出vue原理(4、computed實現)

vue原理系列

vue原理一

vue原理二

vue原理三

vue原理四

computed實現

在vue參數裏傳入

<div id="app">
  <p>a.a: {{ a.a }}</p>
  <p>b: {{ b }}</p>
  <p>{{ add }}</p>
</div>

var vm = new Vue({
    el: '#app',
    data: {
      a: { a: '1' },
      b: '2'
    },
    computed: {
      add() {
        return this.a.a + this.b;
      }
    }
});
複製代碼

function Vue(options) {
    忽略...
    initCumputed.call(this);

  }

  function initCumputed() {
    let vm = this;
    // 拿到computed屬性
    let computed = this.$options.computed;
    Object.keys(computed).forEach(k => {
      // debugger;
      Object.defineProperty(vm, k, {
        get:
          typeof computed[k] === 'function' ? computed[k] : computed[k].get, //判斷是函數仍是對象
        set() {}
      });
    });
  }
複製代碼