亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue源碼解析系列－compute實(shí)現(xiàn)機(jī)制

Lsnsh / 1810人閱讀

摘要：在看的實(shí)現(xiàn)之前。實(shí)現(xiàn)響應(yīng)式的關(guān)鍵有三個(gè)遍歷中的屬性。在方法中設(shè)置核心數(shù)據(jù)劫持每個(gè)屬性都有一個(gè)自己的消息訂閱起用于訂制該屬性上的所有觀察者觀察者，通過實(shí)現(xiàn)對響應(yīng)屬性的監(jiān)聽觀察。觀察得到結(jié)果后，主動觸發(fā)自己的回調(diào)可以去看看的這三部分源碼。

本來vue的響應(yīng)式應(yīng)該才是重中之重。但是網(wǎng)上的文章很多很多。在看computed的實(shí)現(xiàn)之前?？隙ㄟ€是要把vue的響應(yīng)式如何實(shí)現(xiàn)好好看一下?；蛘哒f兩者根本就是一樣的東西。這邊推薦幾篇文章關(guān)于vue的響應(yīng)式。

vue響應(yīng)式簡單實(shí)現(xiàn)

vue慕課響應(yīng)式手記

還是看看官網(wǎng)對于響應(yīng)式的解釋：

總的來說。vue實(shí)現(xiàn)響應(yīng)式的關(guān)鍵有三個(gè)：watcher,dep,observe;

observe:遍歷data中的屬性。在get,set方法中設(shè)置核心數(shù)據(jù)劫持

dep：每個(gè)屬性都有一個(gè)自己的dep（消息訂閱起）用于訂制該屬性上的所有觀察者

watcher：觀察者，通過dep實(shí)現(xiàn)對響應(yīng)屬性的監(jiān)聽觀察。觀察得到結(jié)果后，主動觸發(fā)自己的回調(diào)

可以去看看vue2.3的這三部分源碼。中間還是有很多精美的設(shè)計(jì)。比如一個(gè)全局唯一的Dep.target，在任何時(shí)候都是唯一的值。以確保同一時(shí)間只有一個(gè)觀察者在訂閱。再比如，watcher中也會存下相關(guān)的訂閱器，實(shí)現(xiàn)去重和實(shí)現(xiàn)同一個(gè)觀察者的分組（這里是實(shí)現(xiàn)computed的關(guān)鍵），再如。watcher中的id也會唯一。用于異步更新的時(shí)候不同時(shí)出發(fā)相同的訂閱。仔細(xì)看看會收獲不小。改天我把所有的響應(yīng)式的代碼也整理一下。
在理解了響應(yīng)式的情況下。我們來看看computed的實(shí)現(xiàn)。最簡單的一個(gè)demo如下：



    




  
{{computeA}}

我們來從源碼的角度看看發(fā)生了什么：

在初始化實(shí)例創(chuàng)建響應(yīng)式的時(shí)候。對options中的computed做了特殊處理：

function initComputed (vm, computed) {
  var watchers = vm._computedWatchers = Object.create(null);

  for (var key in computed) {
    var userDef = computed[key];
    var getter = typeof userDef === "function" ? userDef : userDef.get;
    {
      if (getter === undefined) {
        warn(
          ("No getter function has been defined for computed property "" + key + ""."),
          vm
        );
        getter = noop;
      }
    }
    // create internal watcher for the computed property.
    watchers[key] = new Watcher(vm, getter, noop, computedWatcherOptions);//為每一個(gè)computed項(xiàng)目訂制一個(gè)watcher

    // component-defined computed properties are already defined on the
    // component prototype. We only need to define computed properties defined
    // at instantiation here.
    if (!(key in vm)) {
      defineComputed(vm, key, userDef);
    } else {
      if (key in vm.$data) {
        warn(("The computed property "" + key + "" is already defined in data."), vm);
      } else if (vm.$options.props && key in vm.$options.props) {
        warn(("The computed property "" + key + "" is already defined as a prop."), vm);
      }
    }
  

function defineComputed (target, key, userDef) {
  if (typeof userDef === "function") {
    sharedPropertyDefinition.get = createComputedGetter(key);
    sharedPropertyDefinition.set = noop;
  } else {
    sharedPropertyDefinition.get = userDef.get
      ? userDef.cache !== false
        ? createComputedGetter(key)
        : userDef.get
      : noop;
    sharedPropertyDefinition.set = userDef.set
      ? userDef.set
      : noop;
  }
  Object.defineProperty(target, key, sharedPropertyDefinition);
}

function createComputedGetter (key) {//構(gòu)造該computed的get函數(shù)
  return function computedGetter () {
    var watcher = this._computedWatchers && this._computedWatchers[key];
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate();//收集該watcher的訂閱
      }
      if (Dep.target) {
        watcher.depend();//同一為這一組訂閱再加上組件re-render的訂閱（該訂閱負(fù)責(zé)更新組件）
      }
      return watcher.value
    }
  }
}

總的來說。理解了響應(yīng)式的構(gòu)建之后。再來看computed的實(shí)現(xiàn)還是很直觀的。組件初始化的時(shí)候。computed項(xiàng)和data中的分別建立響應(yīng)式。data中的數(shù)據(jù)直接對屬性的get,set做數(shù)據(jù)攔截。而computed則建立一個(gè)新的watcher，在組件渲染的時(shí)候。先touch一下這個(gè)computed的getter函數(shù)。將這個(gè)watcher訂閱起來。這里相當(dāng)于這個(gè)computed的watcher訂閱了firstname和lastname。touch完后。Dep.target此時(shí)又變?yōu)橹澳莻€(gè)用于更新組件的。再通過watcher.depend()將這個(gè)組統(tǒng)一加上這個(gè)訂閱。這樣一旦firstname和lastname變了。同時(shí)會觸發(fā)兩個(gè)訂閱更新。其中一個(gè)便是更新組件。重新re-render的函數(shù)。感覺看的還不夠細(xì)啊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/83565.html

相關(guān)文章

  • Vuex源碼解析

    摘要：可能會有理解存在偏差的地方，歡迎提指出，共同學(xué)習(xí)，共同進(jìn)步。先來看一下這張的數(shù)據(jù)流程圖，熟悉使用的同學(xué)應(yīng)該已經(jīng)有所了解。它允許用戶在某些情況下避免自動安裝。 寫在前面 因?yàn)閷ue.js很感興趣，而且平時(shí)工作的技術(shù)棧也是Vue.js，這幾個(gè)月花了些時(shí)間研究學(xué)習(xí)了一下Vue.js源碼，并做了總結(jié)與輸出。 文章的原地址：https://github.com/answershuto/lear...

    chinafgj 評論0 收藏0

  • 從 VantComponent 談 小程序維護(hù)

    摘要：不多廢話，先說結(jié)論小程序組件寫法這里就不再介紹。在官方文檔中，我們可以看到使用構(gòu)造器構(gòu)造頁面事實(shí)上，小程序的頁面也可以視為自定義組件。經(jīng)過一番測試，得出結(jié)果為為了簡便。畢竟官方標(biāo)準(zhǔn)，不用擔(dān)心其他一系列后續(xù)問題。 在開發(fā)小程序的時(shí)候，我們總是期望用以往的技術(shù)規(guī)范和語法特點(diǎn)來書寫當(dāng)前的小程序，所以才會有各色的小程序框架，例如 mpvue、taro 等這些編譯型框架。當(dāng)然這些框架本身對于新開...

    worldligang 評論0 收藏0

  • VUE - MVVM - part10 - Computed

    摘要：了解之后我們來實(shí)現(xiàn)它，同樣的為了方便理解我寫成了一個(gè)類這里的一般是的實(shí)例將屬性代理到實(shí)例下的構(gòu)造函數(shù)我們實(shí)現(xiàn)了代理屬性和更新計(jì)算屬性的值，同時(shí)依賴沒變化時(shí)，也是不會觸發(fā)的更新，解決了以上的個(gè)問題。 看這篇之前，如果沒有看過之前的文章，移步拉到文章末尾查看之前的文章。 回顧 先捋一下，之前我們實(shí)現(xiàn)的 Vue 類，主要有一下的功能： 屬性和方法的代理 proxy 監(jiān)聽屬性 watche...

    callmewhy 評論0 收藏0

  • 深入解析Vue源碼

    摘要：你可以使用的方法傳入指令和定義對象來注冊一個(gè)全局自定義指令。深度數(shù)據(jù)觀察如果你希望在一個(gè)對象上使用自定義指令，并且當(dāng)對象內(nèi)部嵌套的屬性發(fā)生變化時(shí)也能夠觸發(fā)指令的函數(shù)，那么你就要在指令的定義中傳入。 Vue簡介 數(shù)據(jù)綁定 /** *假設(shè)有這么兩個(gè)鐘東西 **/ //數(shù)據(jù) var object = { message: Hello World! } //DOM {{ messag...

    weapon 評論0 收藏0

  • Vue源碼解析(三)-computed計(jì)算屬性&&lazy watcher

    摘要：前言源碼解析一模版渲染源碼解析二雙向綁定官網(wǎng)給出的如下結(jié)果源碼分析判斷參數(shù)是否包含屬性本例中本例中和是函數(shù)監(jiān)聽計(jì)算屬性設(shè)置，延遲執(zhí)行的方法設(shè)置可以通過本例方式訪問計(jì)算屬性對象初始化時(shí)會針對屬性的所有值分別一個(gè)對象，在源碼解析二中有詳細(xì)介 前言 1、Vue源碼解析(一)-模版渲染2、Vue源碼解析(二)-MVVM雙向綁定 demo 官網(wǎng)給出的demo如下 new Vue({ el...

    CoderStudy 評論0 收藏0

發(fā)表評論

0條評論

Lsnsh

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<