Vue computed實現原理深入講解

更新時間：2022年10月21日 15:09:52 作者：Young soul2

computed又被稱作計算屬性，用于動態(tài)的根據某個值或某些值的變化，來產生對應的變化，computed具有緩存性，當無關值變化時，不會引起computed聲明值的變化。產生一個新的變量并掛載到vue實例上去

<template>
  <div>
    {{getA}}
    <button @click="addModule">新增</button>
  </div>
</template>
<script>
export default {
  name: "TestWebpackTest",
  mounted() {
    console.log(this);
  },
  data() {
    return {
      num: 1,
      a:2
    };
  },
  computed:{
    getA(){
      return this.a
    }
  },  
  methods: {
    addModule() {
      this.a++;
    }
  }
};
</script>
<style lang="scss">
div {
  .test {
    width: 10px;
    height: 15px;
    background-color: blue;
  }
}
</style>

定義依賴

直接上代碼，在執(zhí)行render函數實例化TestWebpackTest組件的時候會執(zhí)行下面的方法：

Vue.extend = function (extendOptions) {
    ...
    if (Sub.options.computed) {
        initComputed(Sub);
    }
    ...
};

在該方法中會執(zhí)行initComputed方法，該方法遍歷computed并執(zhí)行defineComputed方法：

function initComputed(Comp) {
    var computed = Comp.options.computed;
    for (var key in computed) {
        defineComputed(Comp.prototype, key, computed[key]);
    }
}

var sharedPropertyDefinition = {
      enumerable: true,
      configurable: true,
      get: noop,
      set: noop
  };
// key: "getA"  target: Vue {constructor: ?} userDef:? getA()
function defineComputed(target, key, userDef) {
      var shouldCache = !isServerRendering(); // true
      if (isFunction(userDef)) {
          sharedPropertyDefinition.get = shouldCache
              ? createComputedGetter(key)
              : createGetterInvoker(userDef);
          sharedPropertyDefinition.set = noop;
      }
      else {
         ...
      }
     ...
      Object.defineProperty(target, key, sharedPropertyDefinition);
  }

主要執(zhí)行了createComputedGetter方法設置computed函數getA的get方法：

// key: "getA"
function createComputedGetter(key) {
      return function computedGetter() {
          var watcher = this._computedWatchers && this._computedWatchers[key];
          if (watcher) {
              if (watcher.dirty) {
                  watcher.evaluate();
              }
              if (Dep.target) {
                  if (Dep.target.onTrack) {
                      Dep.target.onTrack({
                          effect: Dep.target,
                          target: this,
                          type: "get" /* TrackOpTypes.GET */,
                          key: key
                      });
                  }
                  watcher.depend();
              }
              return watcher.value;
          }
      };
  }

該方法執(zhí)行過程在收集依賴部分分析。返回該函數后執(zhí)行Object.defineProperty(target, key, sharedPropertyDefinition)，給當前的vm設置getA響應式。至此設置響應完畢。

收集依賴

收集依賴發(fā)生在執(zhí)行組件渲染過程，會通過_vm.getA觸發(fā)computed的get方法。

var render = function render() {
  var _vm = this,
    _c = _vm._self._c
  return _c("div", [
    _vm._v("\n  " + _vm._s(_vm.getA) + "\n  "),
    _c("button", { on: { click: _vm.addModule } }, [_vm._v("新增")]),
  ])
}

會獲取當前的computed函數生成的watcher，繼續(xù)執(zhí)行watcher.evaluate()方法：

var watcher = this._computedWatchers && this._computedWatchers[key];
 if (watcher) {
     if (watcher.dirty) { // true
         watcher.evaluate();
     }
     if (Dep.target) {
         if (Dep.target.onTrack) {
             Dep.target.onTrack({
                 effect: Dep.target,
                 target: this,
                 type: "get" /* TrackOpTypes.GET */,
                 key: key
             });
         }
         watcher.depend();
     }
     return watcher.value;
 }
Watcher.prototype.evaluate = function () {
     this.value = this.get();
     this.dirty = false;
 };

調用當前watcher的get方法，首先設置當前的Dep.target為當前的watcher，然后執(zhí)行this.getter方法，該方法為getA方法，相當于執(zhí)行該函數。

Watcher.prototype.get = function () {
     pushTarget(this);
     var value;
     var vm = this.vm;
     try {
         value = this.getter.call(vm, vm);
     }
     catch (e) {
        ...
     }
     finally {
         // "touch" every property so they are all tracked as
         // dependencies for deep watching
         if (this.deep) {
             traverse(value);
         }
         popTarget();
         this.cleanupDeps();
     }
     return value;
 };

由于依賴于a變量，所以會觸發(fā)a變量的get方法，并執(zhí)行dep.depend方法

var value = getter ? getter.call(obj) : val;
if (Dep.target) {
     {
         dep.depend({
             target: obj,
             type: "get" /* TrackOpTypes.GET */,
             key: key
         });
     }
     ...
 }
 return isRef(value) && !shallow ? value.value : value;
 ...
Dep.prototype.depend = function (info) {
   if (Dep.target) {
        Dep.target.addDep(this);
        if (info && Dep.target.onTrack) {
            Dep.target.onTrack(__assign({ effect: Dep.target }, info));
        }
    }
};
...
Watcher.prototype.addDep = function (dep) {
    var id = dep.id;
    if (!this.newDepIds.has(id)) {
        this.newDepIds.add(id);
        this.newDeps.push(dep);
        if (!this.depIds.has(id)) {
            dep.addSub(this);
        }
    }
};

當前的Dep.target是getA的watcher實例，a變量會找到訂閱者(getA的watcher)，并在該watcher的newDeps里添加該變量的dep（this.newDeps.push(dep)），然后該變量會把getA的watcher加入自己的依賴（dep.addSub(this)）。從而建立了getA和num之間的聯系。接下來執(zhí)行popTarget()和this.cleanupDeps()將當前Dep.target置為組件的watcher，然后newDeps的值賦給deps。至此watcher.evaluate()執(zhí)行完后this.getter.call(vm, vm)執(zhí)行完畢，返回a的value。

觸發(fā)依賴

當變量發(fā)生變化時會觸發(fā)該變量的set方法：

function reactiveSetter(newVal) {
    var value = getter ? getter.call(obj) : val;
     ...
     else if (!shallow && isRef(value) && !isRef(newVal)) {
         value.value = newVal;
         return;
     }
     else {
         val = newVal;
     }
     childOb = !shallow && observe(newVal, false, mock);
     {
         dep.notify({
             type: "set" /* TriggerOpTypes.SET */,
             target: obj,
             key: key,
             newValue: newVal,
             oldValue: value
         });
     }
 }

主要執(zhí)行dep.notify方法：

Dep.prototype.notify = function (info) {
    // stabilize the subscriber list first
    var subs = this.subs.slice();
    ...
    for (var i = 0, l = subs.length; i < l; i++) {
        ...
        subs[i].update();
    }
};
Watcher.prototype.update = function () {
   /* istanbul ignore else */
    if (this.lazy) {
        this.dirty = true;
    }
    else if (this.sync) {
        this.run();
    }
    else {
        queueWatcher(this);
    }
};

主要執(zhí)行subs[i].update()方法，當前的變量a有兩個dep，computed的lazy為true不會繼續(xù)執(zhí)行。第二個dep為組件的watcher，執(zhí)行該watcher的update方法重新渲染刷新頁面。

總結

在組件實例化的時候會遍歷computed設置computed的get方法并設置Dep.target為當前computed的watcher。
在執(zhí)行渲染模板方法的時候會觸發(fā)該computed的get方法。
會執(zhí)行computed函數，當該函數里獲取變量時會觸發(fā)變量的get方法。該變量會通過Dep.target獲取當前的watcher并添加自己的dep（相當于記錄了訂閱了哪些變量），也就是說獲取變量的時候會訂閱該變量，該變量也會在自己的依賴dep添加watcher（記錄訂閱者，發(fā)生變化時會通知訂閱者）。
當前變量發(fā)生改變時會循環(huán)觸發(fā)該變量的dep的update方法刷新頁面。其中computed方法由于已經獲取最新值所以只需要執(zhí)行組件的update方法。

到此這篇關于Vue computed實現原理深入講解的文章就介紹到這了,更多相關Vue computed內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue
computed

vue使用Vue.extend創(chuàng)建全局toast組件實例
這篇文章主要介紹了vue使用Vue.extend創(chuàng)建全局toast組件實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue.js原理分析之nextTick實現詳解
這篇文章主要給大家介紹了關于Vue.js原理分析之nextTick實現的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-09-09
Vue3中插槽(slot)用法匯總(推薦)
這篇文章主要介紹了Vue3中插槽(slot)用法匯總,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
解決vue-cli輸入命令vue ui沒效果的問題
這篇文章主要介紹了解決vue-cli輸入命令vue ui沒效果的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue3引入highlight.js進行代碼高亮的方法實例
最近忙著開發(fā)自己的開發(fā)腳手架,在做代碼生成器的時候,有個預覽功能,需要讓代碼高亮,下面這篇文章主要給大家介紹了關于vue3引入highlight.js進行代碼高亮的相關資料,需要的朋友可以參考下
2022-04-04
Vue3中Cesium地圖初始化及地圖控件配置方法
本文中，我們主要介紹Cesium在Vue3運行環(huán)境的配置，及Cesium實例中控件的顯隱設置，本項目基于pnpm安裝，也可使用其他包管理器進行安裝，如npm或yarn，本文通過示例代碼對vue初始化Cesium地圖相關知識介紹的非常詳細，需要的朋友參考下吧
2023-07-07
一定要知道的 25 個 Vue 技巧
這篇文章主要給大家分享將 prop 限制為類型列表、默認內容和擴展點、使用引號觀察嵌套值、知道何時使用 v-if、單作用域 slot 的簡寫、有條件地渲染slot等25 個Vue 技巧，下文是下相關資料,需要的朋友可以參考一下
2021-11-11
更強大的vue ssr實現預取數據的方式
這篇文章主要介紹了更強大的 vue ssr 預取數據的方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-07-07
Vue實現上下層疊輪播圖
這篇文章主要介紹了Vue實現上下層疊輪播圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
解讀Vue-loader的相關知識
這篇文章主要介紹了解讀Vue-loader的相關知識，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03