vue如何實現響應式與雙向數據

本文小編為大家詳細介紹“vue如何實現響應式與雙向數據”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue如何實現響應式與雙向數據”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

vue-響應式是什么?

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

Vue 響應式系統的底層的細節。

vue-響應式如何實現的？

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

對雙向數據綁定的理解

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

我們可以使用v-model 在表單元素上創建雙向數據綁定

數據驅動是Vue最獨特的特性之一

開發過程中僅僅需要關注數據本身，不需要關心數據是如何渲染到視圖中的。主流的MVVM框架都已經實現了數據響應式與雙向綁定，所以可以將數據綁定到DOM上。

在vue.js中，所謂的數據驅動就是當數據發生變化的時候，用戶界面發生相應的變化，開發者不需要手動的去修改dom。

對數據驅動的理解：

那么vuejs是如何實現這種數據驅動的呢？

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

vue的數據雙向綁定

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

對vue-雙向數據的分析？/v-model 雙向數據綁定的原理

代碼如下（示例）：

  <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
  // 輸出一下這個值 當前這個值是一個層級嵌套的數組我們通過foreach 
  // console.log(nodes)

  nodes.forEach(item => {
    // 再輸出一下item html:49 <input type="text" v-model="name"> 是一個input 輸入框
    // console.log(item)
    // 篩選出當前是標簽的 ,因為nodes這個輸出會將空格以‘text' nodeType為3，而標簽nodetype是1，if判斷篩選出是標簽的
   if (item.nodeType === 1){
     const attrs = item.attributes
      // console.log(attrs)  {0: type, 1: v-model, type: type, v-model: v-model, length: 2} 返回了一個是數組
    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
            })
        }
      })
   }
  })
}

讀到這里，這篇“vue如何實現響應式與雙向數據”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。