成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

淺析Vue響應(yīng)式原理（三）

tomener / 2925人閱讀

摘要：響應(yīng)式原理之不論如何，最終響應(yīng)式數(shù)據(jù)都要通過來實現(xiàn)，實際要借助新增的。在函數(shù)內(nèi)，首先實例化一個實例，會在稍后添加為響應(yīng)式數(shù)據(jù)自定義的中發(fā)揮作用。只有數(shù)組和對象才可能是響應(yīng)式，才能返回實例。參考鏈接技術(shù)內(nèi)幕揭開數(shù)據(jù)響應(yīng)系統(tǒng)的面紗源碼

Vue響應(yīng)式原理之defineReactive defineReactive

不論如何，最終響應(yīng)式數(shù)據(jù)都要通過defineReactive來實現(xiàn)，實際要借助ES5新增的Object.defineProperty。

defineReactive接受五個參數(shù)。obj是要添加響應(yīng)式數(shù)據(jù)的對象；key是屬性名，val是屬性名對應(yīng)的取值；customSetter是用戶自定義的setter；會在響應(yīng)式數(shù)據(jù)的setter中執(zhí)行，只有開發(fā)環(huán)境可用；通過shallow指定是否淺比較，默認(rèn)深比較。

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  const getter = property && property.get
  if (!getter && arguments.length === 2) {
    val = obj[key]
  }
  const setter = property && property.set

  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== "production" && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

在函數(shù)內(nèi)，首先實例化一個Dep實例dep，dep會在稍后添加為響應(yīng)式數(shù)據(jù)自定義的get/set中發(fā)揮作用。接著獲取屬性描述符，如果屬性不可配置，則無法調(diào)用Object.defineProperty來修改setter/getter，所以返回。

如果原來已設(shè)置過setter/getter，緩存起來。當(dāng)未自定義getter且arguments長度為2（即只傳入了obj和key）時，可以直接用方括號求值，使用閉包變量val緩存初始值。

如果不是淺復(fù)制，執(zhí)行observe(val)，為val添加__ob__屬性并返回__ob__指向的Observer實例。（只有數(shù)組和對象才可能是響應(yīng)式，才能返回Observer實例）。

使用Object.defineProperty為obj[key]設(shè)置getter和setter。

在get內(nèi)，如果原來已設(shè)置過getter，則用緩存的getter求值，否則使用閉包變量val作為返回值；同時添加依賴。此處為兩個Dep實例添加依賴。dep是閉包變量，在getter/setter中會使用到。另一個Dep實例是childOb.dep，只用調(diào)用set/delete更新響應(yīng)式數(shù)據(jù)時，才會觸發(fā)；如果value是數(shù)組，還會遍歷元素，為存在__ob__屬性的元素收集依賴。

在set內(nèi)，先獲取更新前的值（邏輯和get內(nèi)第一步一樣）。判斷更新前后的值是否相等，相等時直接返回；不等時，如果有緩存的setter，調(diào)用緩存的setter更新，否則直接賦值。值得注意的是，NaN === NaN是不成立的，反而NaN !== NaN是成立的，后面的判斷語句newVal !== newVal && value !== value就是為了避免newVal/val都是NaN。在更新后的值newVal上執(zhí)行observe，更新閉包變量childOb，并調(diào)用notify。

參考鏈接

Vue技術(shù)內(nèi)幕|揭開數(shù)據(jù)響應(yīng)系統(tǒng)的面紗

Vue.js源碼

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/99627.html

相關(guān)文章

  • 淺析Vue響應(yīng)式原理（二）

    摘要：響應(yīng)式原理之之前簡單介紹了和類的代碼和作用，現(xiàn)在來介紹一下類和。對于數(shù)組，響應(yīng)式的實現(xiàn)稍有不同。不存在時，說明不是響應(yīng)式數(shù)據(jù)，直接更新。如果對象是響應(yīng)式的，確保刪除能觸發(fā)更新視圖。 Vue響應(yīng)式原理之Observer 之前簡單介紹了Dep和Watcher類的代碼和作用，現(xiàn)在來介紹一下Observer類和set/get。在Vue實例后再添加響應(yīng)式數(shù)據(jù)時需要借助Vue.set/vm.$se...

    rockswang 評論0 收藏0

  • 從數(shù)組入手淺析Vue響應(yīng)式原理

    摘要：響應(yīng)式原理為了探究這一切的原因，我再次點開了的官網(wǎng)。在官網(wǎng)很下面的位置，找到了關(guān)于響應(yīng)式原理的說明。因此，新添加到數(shù)組中的對象中的屬性，就成了非響應(yīng)式的屬性了，改變它自然不會讓組件重新渲染。響應(yīng)式屬性的對象，有這個對象就代表是響應(yīng)式的。 ??最近在用Vue開發(fā)一個后臺管理的demo，有一個非常常規(guī)的需求。然而這個常規(guī)的需求中，包含了大量的知識點。有一個產(chǎn)品表格，用來顯示不同產(chǎn)品的信息。...

    dkzwm 評論0 收藏0

  • 淺析Vue響應(yīng)式原理（一）

    摘要：淺析響應(yīng)式原理一的特點之一是響應(yīng)式，視圖隨著數(shù)據(jù)的更新而更新，在視圖中修改數(shù)據(jù)后實例中的數(shù)據(jù)也會同步更新。對于每個響應(yīng)式數(shù)據(jù)，會有兩個實例，第一個是在中的閉包遍歷，用途顯而易見。接收一個回調(diào)函數(shù)，會在重新求值且值更新后執(zhí)行。 淺析Vue響應(yīng)式原理（一） Vue的特點之一是響應(yīng)式，視圖隨著數(shù)據(jù)的更新而更新，在視圖中修改數(shù)據(jù)后Vue實例中的數(shù)據(jù)也會同步更新。內(nèi)部借助依賴(下文中的Dep類)...

    lookSomeone 評論0 收藏0

  • 前方來報，八月最新資訊--關(guān)于vue2&3的最佳文章推薦

    摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認(rèn)命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...

    izhuhaodev 評論0 收藏0

  • 淺析RWD

    摘要：三響應(yīng)式網(wǎng)頁設(shè)計的基本原理標(biāo)簽，允許頁面寬度自動調(diào)整大多數(shù)移動瀏覽器將頁面放大為寬的視圖以符合屏幕分辨率。解決方案使用，選擇器清除浮動，只適用于非瀏覽器。由于移動設(shè)備屏幕大小的限制，在其上進(jìn)行顯示的內(nèi)容一般是經(jīng)過精心篩選的。 一、前言 現(xiàn)今，無論是移動設(shè)備、平板電腦、PC，屏幕大小各不相同，若是針對每個屏幕大小單獨設(shè)計一個解決方案，則會大幅增加網(wǎng)站建設(shè)的復(fù)雜程度和運營成本。響應(yīng)式網(wǎng)頁設(shè)...

    0x584a 評論0 收藏0

發(fā)表評論

0條評論

tomener

男|高級講師

TA的文章

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