模拟vue实现数据的双向绑定 v-model

于 2023-05-05 11:51:18 发布
阅读量158 收藏
点赞数
分类专栏： web前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_53862758/article/details/130503840
版权 
<!DOCTYPE html>
<html lang="zh-cn">

<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>Document</title>
</head>

<body>
  <div id="test">
    <h1 class="te1">{{name}}</h1>
    <h1 class="te2">{{name}}</h1>

    <h1 class="te3">{{name}}</h1>
    <h1 class="te4">{{test}}</h1>
    <h1 class="te5">{{name}}</h1>
    <h1 class="te6">{{name}}</h1>
    <h1 class="te7">{{name}}</h1>
    <h1 class="te8">{{test2}}</h1>

    <input v-model="name" />
    <input v-model="test" />
    <textarea v-model="test2" placeholder="" placeholder-class="textarea-placeholder"></textarea>

  </div>
  <script type="module">
    export class SelfVue {
      constructor({ data, el }) {
        console.log(data, 'data')
        this.data = data
        this.el = document.getElementById(el)
        this.init(data, this.el, el)
      }
      init(data, el, id) {

        let str = stringIze(el)
        //给每个元素都加上特殊的
        function addId(str) {
          for (let i = 0; i < str.length;) {
            let tempStr = str.slice(i)
            let inner = /<(.+)>{{(.+)}}<\/.+>/.exec(tempStr)
            let inner2 = /<([^/<>]+)>/.exec(tempStr)
            if (inner2) {
              let id = ' data-v-' + (new Date().getTime() + Math.floor(Math.random() * 1000) + Math.floor(Math.random() * 1000) + Math.floor(Math.random() * 1000))
              str = str.slice(0, i) + str.slice(i, i + inner2.index) + inner2[0].slice(0, inner2[1].split(' ')[0].length + 1) + id + tempStr.slice(inner2.index + inner2[1].split(' ')[0].length + 1)
              i = i + inner2.index + inner2[0].length + 1 + id.length

            } else {
              break
            }
          }
          return str
        }
        str = addId(str)
        for (const key in data) {
          str = changeText(key, str, data[key])
          str = handleModel(key, str, data[key])

          defineDeby(key, str, data[key])
        }
        for (const key2 in data) {
          setChange(key2, str, data[key2])
        }

        function defineDeby(key, str, value, nonee) {
          console.log('define', data, key, data[key], data.test, nonee)
          Object.defineProperty(data, key, {

            set(newVal) {
              console.log(key + 'change', newVal, data)
              value = newVal
              str = stringIze(el)
              str = addId(str)
              for (const key2 in data) {
                str = changeText(key2, str, data[key2])
                str = handleModel(key2, str, data[key2])


                defineDeby(key2, str, data[key2], 111)
              }
              for (const key2 in data) {
                setChange(key2, str, data[key2])
              }
              console.log(str, 'str obj')
            }, get() {
              console.log('read' + key, value)
              return value
            }
          })
        }
        console.log(str, 'changeStr', document.getElementById(id), document)
        //改变v-model变量的值
        function handleModel(key, str, value) {
          let a = ['input', 'textarea']
          if (str.indexOf(`v-model="${key}"`) > -1) {
            for (let i = 0; i < str.length;) {
              let tempStr = str.slice(i)
              if (tempStr.indexOf(key) === -1) break
              let inner = /<([a-zA-Z0-9]+)[^/]*(data-v-[0-9]+)[^/]*v-model=\"([a-zA-Z][a-zA-Z0-9]*)\"[^/]*>/.exec(tempStr)
              let inner2 = /<([a-zA-Z0-9]+).*(data-v-[0-9]+).*v-model=\"([a-zA-Z][a-zA-Z0-9]*)\".*>/.exec(tempStr)

              if ((inner && inner[3] === key && inner[1] === 'textarea')) {
                str = str.slice(0, i) + str.slice(i, i + inner.index) + inner[0].slice(0, inner[0].length - 1) + ` value="${value}">` + tempStr.slice(inner[0].length + inner.index)
                console.log(str.slice(0, i), '1', str.slice(i, i + inner.index), '2', inner[0].slice(0, inner[0].length - 1), '3', tempStr.slice(inner[0].length + inner.index), '4')

                i = i + inner.index + inner[0].length + 1 + ` value="${value}">`.length
              } else if ((inner2 && inner2[3] === key && inner2[1] === 'input')) {
                str = str.slice(0, i) + str.slice(i, i + inner2.index) + inner2[0].slice(0, inner2[0].length - 1) + ` value="${value}">` + tempStr.slice(inner2[0].length + inner2.index)
                console.log(str.slice(0, i), '1', str.slice(i, i + inner2.index), '2', inner2[0].slice(0, inner2[0].length - 1), '3', tempStr.slice(inner2[0].length + inner2.index), '4')

                i = i + inner2.index + inner2[0].length + 1 + ` value="${value}">`.length
              }

              else {
                i++
              }
            }
            document.getElementById(id)?.parentNode.removeChild(document.getElementById(id))
            document.getElementsByTagName('body')[0].appendChild(parseElement(str))
            console.log(str, 'str', document.getElementsByTagName('body'))

          }
          return str
        }
        function setChange(key, str, value) {
          for (let i = 0; i < str.length;) {
            let tempStr = str.slice(i)
            if (tempStr.indexOf(key) === -1) break
            let inner = /<([a-zA-Z0-9]+)[^/]*(data-v-[0-9]+)[^/]*v-model=\"([a-zA-Z][a-zA-Z0-9]*)\"[^/]*>/.exec(tempStr)
            let inner2 = /<([a-zA-Z0-9]+).*(data-v-[0-9]+).*v-model=\"([a-zA-Z][a-zA-Z0-9]*)\".*>/.exec(tempStr)

            if ((inner && inner[3] === key && inner[1] === 'textarea')) {
              console.log(document.querySelector(`${inner2[1]}[${inner2[2]}]`))
              document.querySelector(`${inner[1]}[${inner[2]}]`).value = value
              document.querySelector(`${inner[1]}[${inner[2]}]`).addEventListener('change', (e) => {
                console.log('key', 'change')
                data[key] = e.target.value
              })
              i = i + inner.index + inner[0].length + 1 + ` value="${value}">`.length
            } else if ((inner2 && inner2[3] === key && inner2[1] === 'input')) {
              console.log(document.querySelector(`${inner2[1]}[${inner2[2]}]`))
              document.querySelector(`${inner2[1]}[${inner2[2]}]`).addEventListener('change', (e) => {
                console.log('key', 'change')
                data[key] = e.target.value
              })
              i = i + inner2.index + inner2[0].length + 1 + ` value="${value}">`.length
            }
            else {
              i++
            }
          }
        }
        // 改变{{}}为变量值
        function changeText(key, str, value) {
          if (str.indexOf(key) > -1) {
            for (let i = 0; i < str.length;) {
              let tempStr = str.slice(i)
              if (tempStr.indexOf(key) === -1) break
              let inner = /{{(.+)}}/.exec(tempStr)
              if (inner && inner[1] === key) {
                str = str.slice(0, i) + str.slice(i, i + inner.index) + value + tempStr.slice(inner[0].length + inner.index)
                i = i + inner.index + inner[0].length + 1

              } else {
                i++
              }
            }
          }
          document.getElementById(id)?.parentNode.removeChild(document.getElementById(id))
          document.getElementsByTagName('body')[0].appendChild(parseElement(str))
          return str
        }

        /*将元素节点类型字符串化*/
        function stringIze(obj) {
          var o = document.createElement("div");
          o.appendChild(obj);
          return o.innerHTML;
        }
        /*字符串解析成元素节点类型*/

        function parseElement(str) {
          var o = document.createElement("div");
          o.innerHTML = str;
          return o.childNodes[0];
        }
      }


    }
    let selfVue = new SelfVue({ data: { name: '111', test: '1', test2: 'z' }, el: 'test' })

  </script>
</body>

</html>

这个是一开始使用的方法，但是考虑到一直销毁元素创建元素，可能不是很好，就用了另外的一种方式

上面的这种方式是将dom转成字符串进行遍历处理；下面的方式是直接遍历dom，拷贝一份dom，在数据变化后，使用拷贝的dom来判断某个元素是否是采用data的数据，需要改变了

下面的方法是 一直在同一个dom上面操作，没有销毁创建等操作

<!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>Document</title>
</head>
<div id="test">
  <h1>
    <strong>{{text}}</strong>
    <strong>{{text.length+name}}</strong>

  </h1>
  <p>{{name}}</p>
  <p @click="changeTest"></p>
  <p>{{new Date()}}</p>
  <input type="text" v-model="name">
  <textarea placeholder="" placeholder-class="textarea-placeholder" type="text" v-model="text"></textarea>

</div>

<body>
  <script>
    class SelfVue {
      constructor({ data, el }) {
        this.data = data
        this.el = el
        this.init()
      }
      init() {
        let children = document.getElementById(this.el).children
        //深拷贝出来，保存{{}}，v-model之类的
        let cloneDocu = clone(document.getElementById(this.el))
        mapChildren(children, this, cloneDocu.children)
        for (let key in this.data) {
          defineObey(this, key, this.data[key])
        }
        function defineObey(_this, key, value) {
          Object.defineProperty(_this.data, key, {
            set(newValue) {
              console.log(key + 'change', newValue)
              value = newValue
              mapChildren(children, _this, cloneDocu.children)
            },
            get() {
              return value
            }
          })
        }
        function mapChildren(children, _this, cloneDocu) {
          let biao = ['TEXTAREA', 'INPUT']
          for (let i = 0; i < children.length; i++) {
            if (biao.indexOf(children[i].nodeName) > -1 && cloneDocu[i].getAttribute('v-model')) {
              let model = cloneDocu[i].getAttribute('v-model')
              for (let key in _this.data) {
                if (model === key) {
                  children[i].value = _this.data[key]
                  children[i].addEventListener('input', (e) => {
                    if (_this.data[key] !== e.target.value)
                      _this.data[key] = e.target.value
                  })
                }
              }
            }
            //获取非子节点的文本
            var arr = [];
            var content = cloneDocu[i];
            for (var j = 0, len = content.childNodes.length; j < len; j++) {
              if (content.childNodes[j]?.nodeType === 3) {  // 通过nodeType是不是文本节点来判断
                arr.push(content.childNodes[j].nodeValue);
              }
            }
            var str = arr.join("");

            let exec = /{{(.+)}}/.exec(str)
            if (exec) {
              exec[1] = handleStr(exec[1], _this)

              children[i].innerText = eval(exec[1])


            }
            mapChildren(children[i].children, _this, cloneDocu[i].children)

          }

        }
        function handleStr(str, _this) {
          const dataKeys = Object.keys(_this.data)
          for (let j = 0; j < str.length;) {
            const tempStr = str.slice(j)
            let min = []
            for (let k = 0; k < dataKeys.length; k++) {
              if (tempStr.indexOf(dataKeys[k]) > -1) {
                if (tempStr.indexOf(dataKeys[k]) < (min[0] || 999999) && tempStr[tempStr.indexOf(dataKeys[k]) - 1] !== '.') {
                  min[0] = tempStr.indexOf(dataKeys[k])
                  min[1] = dataKeys[k]
                }
              }
            }
            if (min[0] !== undefined && min[1] !== undefined) {
              str = str.slice(0, j) + str.slice(j, j + min[0]) + '_this.data.' + tempStr.slice(min[0])
              j = j + min[0] + min[1].length + '_this.data.'.length
            } else {
              j++
            }
          }
          return str
        }
        function clone(origin) {
          var originNew = origin.cloneNode();
          // originNew.innerText = origin.innerText
          //进行attr属性的复制过来  同理，想在克隆的时候复制其他同样可以加进来
          if (origin.attributes != null) {
            for (var index = 0; index < origin.attributes.length; index++) {
              var attr = origin.attributes[index];
              var name = attr.name;
              var value = attr.value;
              originNew.setAttribute(name, value);
            }
          }

          //克隆子标签
          var originChildNodes = origin.childNodes;
          for (var index = 0; index < originChildNodes.length; index++) {
            var node = originChildNodes[index];
            if (node != null) {
              //递归进行子标签的克隆
              var childNode = clone(node);
              originNew.appendChild(childNode);
            }
          }
          return originNew;
        };

      }
    }
    let a = { data: { name: 'xxx', text: 'shh' }, el: 'test' }
    let vue = new SelfVue(a)
  </script>
</body>

</html>

实现vue的双向绑定v-model(简易版）
AROUND
05-13 334
Vue.js的双向数据绑定主要是通过v-model指令来实现的。但直接手写一个简易的双向绑定系统来模拟Vue的这一特性，可以帮助理解其背后的机制。以下是一个简化的实现思路，包括定义一个简单的观察者模式（Observer）和发布订阅模式（Pub/Sub）来实现数据变化的监听与更新。
Vue中的v-model
weixin_45586870的博客
02-09 467
一、v-model的用法简介 在表单控件或者组件上创建双向绑定，其实就是给表单控件或者组件绑定数据。 二、案例 ①index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <me
仿一下vue的v-model双向绑定的实现一个观察者模式
sch695241721的博客
12-02 612
// 创建对象 var targetObj = { name:'小李' } var targetObj2 = { name:'小李' } // 定义值改变时的处理函数（观察者） function observer(oldVal, newVal) { // 其他处理逻辑... targetObj2.name = newVal console.info('targetObj2的name属性的值改变为 ' + newVal); } // 定义name属性及其set和get
Vue--如何自己实现双向数据绑定v-model ？
夜神、
09-13 940
1. Vue v-model实现原理 VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。 2. Object.defineProperty() 简单应用 简化版 var obj = { } var name //第一个参数：定义属性的对象。 //第二个参数：要定义或修改的属性的名称。 //第三个参数：将被定义或修改的属性描述符。 Object.defineProperty(obj, "d
手动实现v-model功能（数据双向绑定）
weixin_43169949的博客
02-14 459
手动实现数据双向绑定
v-model的双向绑定
YI_Zyd的博客
08-12 944
v-model的双向绑定
vue.js自定义组件实现v-model双向数据绑定的示例代码
10-15
在Vue.js中，v-model指令是用于实现表单输入和应用状态之间的双向数据绑定的一个语法糖。它在内部处理了组件的value属性和input事件，使得开发者可以非常方便地实现表单控件的双向绑定。然而，在自定义组件上直接...
vue3实现v-model原理详解
10-16
Vue 3的v-model不再直接提供双向绑定的语法糖，而是通过新的Composition API以及Proxy对象来实现响应式数据的变化与UI的更新。本文将详细阐述Vue 3中v-model的实现原理，并通过示例代码帮助理解。 首先，了解Proxy...
Vue实现双向数据绑定：v-model、v-bind与v-click实战
双向数据绑定的核心原理是利用Object对象的defineProperty方法，通过设置setter和getter来实现数据的同步更新。" 在Vue.js中，双向数据绑定是一个非常关键的概念，它使得视图层和数据模型之间能保持同步，简化了...
用vue.js组件模拟v-model指令实例方法
09-19
假设我们需要构建一个自定义的输入框组件，该组件能够像`v-model`那样实现数据的双向绑定。具体而言，当用户在输入框中输入文本时，相应的数据模型应该实时更新。但是在这个场景下我们无法直接使用`v-model`指令，...
vue中使用v-model绑定表单操作
chengxue_123的博客
10-27 528
通过v-model双向绑定表单案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body
vue3.0 + Ts v-model在自定义组件上的使用教程
郝峰vip的博客
04-12 2212
vue3.0 + TS 自定义组件上使用v-model的教程
Vue---自定义v-model的写法实现
COCOLI_BK的博客
11-16 858
子组件中这样写：props: {return ''}},// 自定义modelmodel: {},methods:{// 事件名要和model属性中event事件名一致},}子组件模板中：父组件模板中子组件标签上：此时父组件中打印myname值就会和子组件的输入值保持双向绑定！！！
vue v-model拼接
热门推荐
weixin_38103152的博客
11-17 1万+
v-model="radioSelect['radio'+index]" radioSelect:{ radio0:'', radio1:'', radio2:'' },
VUE封装el-input形成双输入框组件，绑定同一个变量
桃桃小鱿鱼的博客
11-11 4485
输入血压，年龄范围等，支持数组和逗号分割两种形式
Vue动态添加v-model绑定及获取其返回数据
weixin_30678349的博客
12-30 8879
从数据库拿到的动态数据绑定到页面对应的v-model或者v-bind上，并且根据对页的操作获取到返回的值： 1、首先在data里定义一个数据 timeTip 为一个空数组 data () { return { timeTip:[] } } 2、将获取到的数据进行动态生成，并塞入 timeTip 中 crea...
Vue自定义组件并实现v-model
咘噜biu的博客
07-30 1万+
为了使组件使用起来更简单或者简洁，我们在vue项目中可能需要自定义组件，并且为它实现v-model，以下介绍具体的实现（此处对element-ui组件el-select的二次封装） 1.组件template部分： <template> <el-select filterable placeholder="请选择" v-model="innerValue" @change="changeHandler" :multiple="multiple" :collapse-tags="tru.
Vue数据双向绑定的实现(v-model与原生js实现)
zhangawei123的博客
02-10 843
现在我们来简单讲解一下vue中的数据双向绑定的实现，也就是vue指令v-model，v-model语法糖的拆解和原生js中Object.definedProperty()实现数据双向绑定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值