瞭解object.defineProperty 實現響應式

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

瞭解 釋出訂閱模式 以及其解決的具體問題

在javascript裡實現資料響應式一般有倆種方案，分別對應著vue2.x 和 vue3.x使用的方式，他們分別是：

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

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

vue-響應式是什麼?

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

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

vue-響應式如何實現的？

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

對雙向資料繫結的理解

資料改變，檢視改變，檢視改變，資料也隨之改http://www.cppcns.com變( 通過這句話，我們可以看到在雙向繫結中是包含了資料響應式的內容)

​ 我們可以使用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,value) {
      Object.defineProperty(data,{
        // 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
            })
        }
      })
   }
  })
}

總結

• 資料響應式的實現無非是物件屬性攔截，我們使用 Object.defineProperty 來實現，在vue3中使
  用 Proxy 物件代理方案進行了優化
• 面試寶典上提到的幾個專業名詞
  observe 物件指的是把資料處理成響應式的物件
  watcher 指的其實就是資料變化之後的更新函式 (vue中的watcher有兩種，一種是用來更新檢視的watcher，一種是通過watch配置項宣告的watcher)
  dep 指的就是使用釋出訂閱實現的收集更新函式和觸發更新函式的物件
• 指令實現的核心無非是通過模板編譯找到標識然後把資料綁上去，等到資料變化之後再重新放一次
• 釋出訂閱模式的本質是解決一對多的問題，在vue中實現資料變化之後的精準更新

到此這篇關於vue響應式原理與雙向資料的文章就介紹到這了,更多相關vue響應式原理與雙向資料內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！