vue2双向数据绑定（不加订阅-观察者模式）

最新推荐文章于 2024-07-12 14:10:05 发布

小河马游六花

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量169

点赞数

分类专栏：手写文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_41198447/article/details/125941476

版权

手写专栏收录该内容

16 篇文章 0 订阅

订阅专栏

直接上代码呗！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双向数据绑定</title>
</head>

<body>
  <div id="app">
    <input type="text" v-model="name">
    {{ name }}
  </div>
  <script src="./index.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          name: 'hello, lyq'
        }
      }
    })
  </script>
</body>
</html>

class Vue {
  constructor(options) {
    let { el, data } = options;
    this.el = document.querySelector(el)
    this._data = data()
    this.domPool = {}
    this.init()
  }

  init() {
    this.initData()
    this.initDom(this.el)
  }
  // 数据劫持
  initData() {
    let _this = this;
    _this.data = {}

    for (let key in _this._data) {
      Object.defineProperty(_this.data, key, {
        get() {
          return _this._data[key]
        },
        set(newValue) {
          _this._data[key] = newValue;
          _this.domPool[key].nodeValue = newValue
        }
      })
    }
  }
  initDom(el) {
    this.bindDom(el)
    this.bindInput(el)
  }
  // text处理
  bindDom(el) {
    let _childNodes = el.childNodes;
    _childNodes.forEach(node => {
      if (node.nodeType === 3) {
        let reg = /\{\{(.*?)\}\}/g;
        let _value = node.nodeValue;
        let _isValid = reg.test(_value);
        if (_isValid) {
          let _name = RegExp.$1.trim();
          node.nodeValue = this._data[_name]
          this.domPool[_name] = node;
        }
      }
      node.childNodes && this.bindDom(node)
    })
  }
  // input 处理
  bindInput(el) {
    const _allInputs = el.querySelectorAll('input');
    _allInputs.forEach(input => {
      let vModel = input.getAttribute('v-model');
      if (vModel) {
        input.value = this.data[vModel];
        input.addEventListener('input', 
        	this.handleInput.bind(this, input, vModel), 
        	false
        )
      }
    })
  }
  handleInput(dom, key) {
    this.data[key] = dom.value
  }
}