vue双向数据绑定原理

前言

最近在学对象的方法，其中有一个是Object.defineProperty(),可以用这个来实现一下vue里面的双向数据绑定。v-model指令一般用于输入框之类的标签使用，所以这里就用一个input标签来模拟一下。

主要实现思路

• DOM驱动数据

  双向数据绑定，就是数据可以驱动视图（DOM），视图也可以驱动数据的改变。想一想，数据怎么改变DOM里面的内容，先简单想一下，在一个input标签里面的改数据，怎么把p元素里面的内容改了？这个input数据改变事件，有keyup,keydown,input,这三个都可以，都能实时看到input框里面的value值的变化。

    <input type="text" id="inp">
    <p id="para"></p>

  const inp = document.getElementById('inp')
  let obj = {
      data: 111
  }
  inp.addEventListener('keyup', function (e) {
    obj.data = e.target.value
  })

这个就是DOM驱动数据啦，obj.data中的数据更改了。

• 数据驱动视图

  首先肯定能想到，obj.data肯定要写到p元素的innerText中去。这里利用属性描述对象，来改变data属性的set方法，当要给data赋值的时候，p元素里面的内容也要跟着改。

  const pEle = document.getElementById('para')
  Object.defineProperty(obj, 'data', {
      set(value) {
        pEle.innerText = value
      }
    })
  

  注意：set方法和get方法一般要配套写。set设置了对应的规则，get也要想一想取值的时候返回什么。

代码

//实现双向数据绑定：数据驱动视图，视图驱动数据
  let obj = {
    data: 111
  }
  let parmas = ''
  const pEle = document.getElementById('para')
  const inp = document.getElementById('inp')

  Object.defineProperty(obj, 'data', {
    get() {
      return parmas // 取值时候的规则
    },
    set(value) {
      parmas = value
      pEle.innerText = value
    }
  })
  inp.addEventListener('keyup', function (e) {
    obj.data = e.target.value
    console.log(obj.data)
  })

效果图如下：