了解object.defineProperty 實現(xiàn)響應(yīng)式

清楚 observe/watcher/dep 具體指的是什么

了解 發(fā)布訂閱模式 以及其解決的具體問題

在Javascript里實現(xiàn)數(shù)據(jù)響應(yīng)式一般有倆種方案，分別對應(yīng)著vue2.x 和 vue3.x使用的方式，他們分別是：

對象屬性攔截 (vue2.x) Object.defineProperty
對象整體代理 (vue3.x) Proxy

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

vue-響應(yīng)式是什么?

Vue 最獨特的特性之一，是其非侵入性的響應(yīng)式系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript對象。而當(dāng)你修改它們時，視圖會進(jìn)行更新。這使得狀態(tài)管理非常簡單直接，不過理解其工作原理同樣重要，這樣你可以避開一些常見的問題。在這個章節(jié)，我們將研究一下

Vue 響應(yīng)式系統(tǒng)的底層的細(xì)節(jié)。

vue-響應(yīng)式如何實現(xiàn)的？

數(shù)據(jù)響應(yīng)式：數(shù)據(jù)模型僅僅是普通的JavaScript對象，而當(dāng)我們修改數(shù)據(jù)時，視圖會進(jìn)行更新，避免了頻繁的DOM操作，提高開發(fā)效率，這與Jquery不一樣，Jquery是頻繁的操作Dom

對雙向數(shù)據(jù)綁定的理解

數(shù)據(jù)改變，視圖改變，視圖改變，數(shù)據(jù)也隨之改變( 通過這句話，我們可以看到在雙向綁定中是包含了數(shù)據(jù)響應(yīng)式的內(nèi)容)

​ 我們可以使用v-model 在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定

數(shù)據(jù)驅(qū)動是Vue最獨特的特性之一

​開發(fā)過程中僅僅需要關(guān)注數(shù)據(jù)本身，不需要關(guān)心數(shù)據(jù)是如何渲染到視圖中的。主流的MVVM框架都已經(jīng)實現(xiàn)了數(shù)據(jù)響應(yīng)式與雙向綁定，所以可以將數(shù)據(jù)綁定到DOM上。

在vue.js中，所謂的數(shù)據(jù)驅(qū)動就是當(dāng)數(shù)據(jù)發(fā)生變化的時候，用戶界面發(fā)生相應(yīng)的變化，開發(fā)者不需要手動的去修改dom。

對數(shù)據(jù)驅(qū)動的理解：

那么vuejs是如何實現(xiàn)這種數(shù)據(jù)驅(qū)動的呢？

vue實現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。當(dāng)把一個普通Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。用戶看不到 getter/setter，但是在內(nèi)部它們讓Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

vue的數(shù)據(jù)雙向綁定

將MVVM作為數(shù)據(jù)綁定的入口，整合Observer，Compile和Watcher三者，通過Observer來監(jiān)聽自己的model的數(shù)據(jù)變化，通過Compile來解析編譯模板指令（vue中是用來解析{{}}），最終利用watcher搭起observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化—>視圖更新；視圖交互變化（input）—>數(shù)據(jù)model變更雙向綁定效果。

對vue-雙向數(shù)據(jù)的分析？/v-model 雙向數(shù)據(jù)綁定的原理

代碼如下（示例）：

  <script>
    // Object 大小寫 value 書寫
    let data = {
      name: '李白',
      age: 18
    }

    Object.keys(data).forEach(key => {
      defineReactiveProperty(data, key, data[key])
    })

    function defineReactiveProperty(data, key, value) {
      Object.defineProperty(data, key, {
        // get獲取
        get() {
          return value
        },
        // set 賦值
        set(newVaue) {
          if (newVaue === value) {
            return
          }
          value = newVaue
          compine()
        }
      })
    }
    compine()
  </script>
</body>

</html>

 
 function compine () {
  // 通過document.querySelect('#app').childNodes 獲取app下所有的子元素
  const nodes = document.querySelector('#app').childNodes
  // 輸出一下這個值 當(dāng)前這個值是一個層級嵌套的數(shù)組我們通過foreach 
  // console.log(nodes)

  nodes.forEach(item => {
    // 再輸出一下item html:49 <input type=​"text" v-model=​"name">​ 是一個input 輸入框
    // console.log(item)
    // 篩選出當(dāng)前是標(biāo)簽的 ,因為nodes這個輸出會將空格以‘text' nodeType為3，而標(biāo)簽nodetype是1，if判斷篩選出是標(biāo)簽的
   if (item.nodeType === 1){
     const attrs = item.attributes
      // console.log(attrs)  {0: type, 1: v-model, type: type, v-model: v-model, length: 2} 返回了一個是數(shù)組
    Array.from(attrs).forEach( arr => {
        // console.log(arr) //  texgt= 'text' v-mode: 'name' ，篩選出這個v-model
        if (arr.nodeName === 'v-model'){
            item.value = data[arr.nodeValue]
            item.addEventListener('input',e => {
              console.log(e.target.value)
              //  
              data[arr.nodeValue] = e.target.value
            })
        }
      })
   }
  })
}

總結(jié)

• 數(shù)據(jù)響應(yīng)式的實現(xiàn)無非是對象屬性攔截，我們使用 Object.defineProperty 來實現(xiàn)，在vue3中使
  用 Proxy 對象代理方案進(jìn)行了優(yōu)化
• 面試寶典上提到的幾個專業(yè)名詞
  observe 對象指的是把數(shù)據(jù)處理成響應(yīng)式的對象
  watcher 指的其實就是數(shù)據(jù)變化之后的更新函數(shù) (vue中的watcher有兩種，一種是用來更新視圖的watcher，一種是通過watch配置項聲明的watcher)
  dep 指的就是使用發(fā)布訂閱實現(xiàn)的收集更新函數(shù)和觸發(fā)更新函數(shù)的對象
• 指令實現(xiàn)的核心無非是通過模板編譯找到標(biāo)識然后把數(shù)據(jù)綁上去，等到數(shù)據(jù)變化之后再重新放一次
• 發(fā)布訂閱模式的本質(zhì)是解決一對多的問題，在vue中實現(xiàn)數(shù)據(jù)變化之后的精準(zhǔn)更新

到此這篇關(guān)于vue響應(yīng)式原理與雙向數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue響應(yīng)式原理與雙向數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論