vue双向数据绑定原理

·  阅读 273

前言

最近在学对象的方法,其中有一个是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)
  })
复制代码

效果图如下:

777.gif

分类:
前端
标签: