快捷導(dǎo)航

深入了解Vue中雙向數(shù)據(jù)綁定原理

更新時間：2022年05月19日 09:48:39 作者：幾何心涼

vue是一個mvvm框架，即數(shù)據(jù)雙向綁定，即當數(shù)據(jù)發(fā)生變化的時候，視圖也就發(fā)生變化，當視圖發(fā)生變化的時候，數(shù)據(jù)也會跟著同步變化。本文將通過示例詳解其中原理，需要的可以參考一下

數(shù)據(jù)的變化反應(yīng)到視圖

前面我們了解到數(shù)據(jù)劫持之后，我們可以在數(shù)據(jù)發(fā)生修改之后做任何我們想要做的事情，操作視圖當然也是OK的

命令式操作視圖

目標：我們通過原始的操作dom的方式讓每一次的name的最新值都能顯示到p元素內(nèi)部

<div id="app">
  <p></p>
</div>
<script>
   let data = {
        name: '小蘭同學',
        age: 18,
        height:180
    }
    // 遍歷每一個屬性
    Object.keys(data).forEach((key)=>{
        // key 屬性名
        // data[key] 屬性值
        defineReactive(data,key,data[key])
    })
    function defineReactive(data,key,value){
        Object.defineProperty(data,key,{
            get(){
               return value
            },
            set(newVal){
              value = newVal 
              // 數(shù)據(jù)發(fā)生變化,操作dom進行更新
              document.querySelector('#app p').innerHTML = data.name
            }
        })
    }
  // 首次渲染
  document.querySelector('#app p').innerHTML = data.name
</script>

聲明式操作視圖

目標：我們將data中name屬性的值作為文本渲染到標記了v-text的p標簽內(nèi)部，在vue中，我們把這種標記式的聲明式渲染叫做指令

<div id="app">
  <p v-text="name"></p>
</div>
<script>
  let data = {
    name: '小蘭同學',
    age: 18,
    height: 180
  }
  // 遍歷每一個屬性
  Object.keys(data).forEach((key) => {
    // key 屬性名
    // data[key] 屬性值
    // data 原對象
    defineReactive(data, key, data[key])
  })
  function defineReactive(data, key, value) {
    Object.defineProperty(data, key, {
      get() {
        return value
      },
      set(newVal) {
        value = newVal
        // 數(shù)據(jù)發(fā)生變化,操作dom進行更新
        compile()
      }
    })
  }
  // 
  function compile() {
    let app = document.getElementById('app')
    // 1.拿到app下所有的子元素
    const nodes = app.childNodes   //  [text, input, text]
    //2.遍歷所有的子元素
    nodes.forEach(node => {
      // nodeType為1為元素節(jié)點
      if (node.nodeType === 1) {
        const attrs = node.attributes
        // 遍歷所有的attrubites找到 v-model
        Array.from(attrs).forEach(attr => {
          const dirName = attr.nodeName
          const dataProp = attr.nodeValue
          if (dirName === 'v-text') {
            node.innerText = data[dataProp]
          }
        })
      }
    })
  }
  // 首次渲染
  compile()
</script>

小結(jié)

不管是指令也好，插值表達式也好，這些都是將數(shù)據(jù)反應(yīng)到視圖的標記而已，通過標記我們可以把數(shù)據(jù)的變化響應(yīng)式的反應(yīng)到對應(yīng)的dom位置上去
找標記，把數(shù)據(jù)綁定到dom的過程，我們稱之為binding

視圖的變化反應(yīng)到數(shù)據(jù)

目標：將data中的message屬性對應(yīng)的值渲染到input上面，同時input值發(fā)生修改之后，可以反向修改message的值，在vue系統(tǒng)中，v-model指令就是干這個事情的，下面我們就實現(xiàn)一下v-model的功能

<div id="app">
  <input v-model="name" />
</div>
<script>
  let data = {
    name: '小蘭同學',
    age: 18,
    height: 170
  }
  // 遍歷每一個屬性
  Object.keys(data).forEach((key) => {
    // key 屬性名
    // data[key] 屬性值
    // data 原對象
    defineReactive(data, key, data[key])
  })
  function defineReactive(data, key, value) {
    Object.defineProperty(data, key, {
      get() {
        return value
      },
      set(newVal) {
        // 數(shù)據(jù)發(fā)生變化,操作dom進行更新
        if (newVal === value) {
          return
        }
        value = newVal
        compile()
      }
    })
  }
  // 編譯函數(shù)
  function compile() {
    let app = document.getElementById('app')
    // 1.拿到app下所有的子元素
    const nodes = app.childNodes   //  [text, input, text]
    //2.遍歷所有的子元素
    nodes.forEach(node => {
      // nodeType為1為元素節(jié)點
      if (node.nodeType === 1) {
        const attrs = node.attributes
        // 遍歷所有的attrubites找到 v-model
        Array.from(attrs).forEach(attr => {
          const dirName = attr.nodeName
          const dataProp = attr.nodeValue
          if (dirName === 'v-model') {
            node.value = data[dataProp]
            // 視圖變化反應(yīng)到數(shù)據(jù) 無非是事件監(jiān)聽反向修改
            node.addEventListener('input', (e) => {
              data[dataProp] = e.target.value
            })
          }
        })
      }
    })
  }
  // 首次渲染
  compile()
</script>

現(xiàn)存的問題

無法做到精準更新

<div id="app">
  <p v-text="name"></p>
  <p v-text="age"></p>
  <p v-text="name"></p>
</div>
<script>
  let data = {
    name: '小蘭同學',
    age: 18,
    height: 180
  }
  // 遍歷每一個屬性
  Object.keys(data).forEach((key) => {
    // key 屬性名
    // data[key] 屬性值
    // data 原對象
    defineReactive(data, key, data[key])
  })
  function defineReactive(data, key, value) {
    Object.defineProperty(data, key, {
      get() {
        return value
      },
      set(newVal) {
        // 數(shù)據(jù)發(fā)生變化,操作dom進行更新
        if (newVal === value) {
          return
        }
        value = newVal
        compile()
      }
    })
  }
  // 編譯函數(shù)
  function compile() {
    let app = document.getElementById('app')
    // 1.拿到app下所有的子元素
    const nodes = app.childNodes   //  [text, input, text]
    //2.遍歷所有的子元素
    nodes.forEach(node => {
      // nodeType為1為元素節(jié)點
      if (node.nodeType === 1) {
        const attrs = node.attributes
        Array.from(attrs).forEach(attr => {
          const dirName = attr.nodeName
          const dataProp = attr.nodeValue
          console.log( dirName,dataProp)
          if (dirName === 'v-text') {
            console.log(`更新了${dirName}指令,需要更新的屬性為${dataProp}`)
            node.innerText = data[dataProp]
          }
        })
      }
    })
  }
  // 首次渲染
  compile()
</script>

以上就是深入了解Vue中雙向數(shù)據(jù)綁定原理的詳細內(nèi)容，更多關(guān)于Vue雙向數(shù)據(jù)綁定的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: