VUE逐点突破系列 – VUE响应式原理剖析

手写实现简单的响应式双向绑定

<html>
  <head>
    <meta charset="UTF-8"/>
    <title>vue</title>
    <script src="./vue.js"></script>
  </head>
</html>
<body>
  <div id="app">
    {{name}}
    <div>{{message}}</div>
    <input v-model='test'/>
    {{test}}
  </div>
</body>

<script>
  let vm = new Vue({
  el: '#app',
  data: {
    name: 'lili',
    message: '测试数据',
    test: ''
  }
})
</script>

下面是html文件中引用的vue.js文件

继承类 EventTarget

class Vue extends EventTarget{
  constructor(option){
    super();
    this.option = option;
    this._data = this.option.data;
    this.el = document.querySelector(this.option.el);
    this.observe(this._data)
    this.compileNode(this.el);
  }
  observe(data){
    let _this = this
    this._data = new Proxy(data,{
      set(target,prop,newValue){
        let event = new CustomEvent(prop,{
          detail: newValue
        })
        _this.dispatchEvent(event)
        return Reflect.set(...arguments)
      }
    })
  }
  compileNode(el){
    let child = el.childNodes;
    [...child].forEach(node => {
      if(node.nodeType === 3){
      	// 文字节点
        let text = node.textContent;
        // 通过正则匹配两侧为{{}}且忽略中间空格的代码
        let reg = /\{\{\s*([^\s\{\}]+)\s*\}\}/
        if(reg.test(text)){
          let $1 = RegExp.$1
          this._data[$1] && (node.textContent = text.replace(reg, this._data[$1]))
          this.addEventListener($1, e=>{
            node.textContent = text.replace(reg, e.detail)
          })
        }
      }else if(node.nodeType === 1){
      	// 元素节点
        let attr = node.attributes;
        // 元素节点含有v-model属性
        if(attr.hasOwnProperty('v-model')){
          let keyName = attr['v-model'].nodeValue;
          node.value = this._data[keyName]
          node.addEventListener('input',e=>{
            this._data[keyName] = node.value
          })
        }
        // 递归编译
        this.compileNode(node)
      }
    })
  }
}
# 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue