使用JavaScript编写vue指令v-model，v-model原理实现

最新推荐文章于 2022-05-19 18:25:34 发布

墨痕留绝

最新推荐文章于 2022-05-19 18:25:34 发布

阅读量1.5k

点赞数 10

分类专栏： vue文章文章标签： javascript vue.js html v-model

本文链接：https://blog.csdn.net/qq_31539817/article/details/120102074

版权

vue文章专栏收录该内容

11 篇文章 1 订阅

订阅专栏

首先先要知道的是v-model的作用是实现数据的双向绑定，即：

数据在视图层的双向响应。

实现思路主要分为两步：

第一步：数据层到视图层的响应

将数据响应到视图层的方式，在vue2使用的是Object.defineProperty()来实现，需要劫持到数据的变化，在数据变化的时候将其渲染到视图上：

A,首先需要遍历data的数据，获取到每个data的属性

B,其次，获取到data的每个属性之后，对属性进行拦截。

C，在拦截时，需要将其值反映到对应的视图标签上。

第C步中又可以分为：

a，获取到视图中每个节点的DOM对象，

b，遍历DOM对象，获取到每个DOM对象对应的node对象（节点对象）。

c，遍历node对象，获取到node对象中含有v-model属性的节点

d，将对应的data的属性值赋值给node节点的value值上

代码实现为：

<body>
    <div id="app">
        名字：<input type="text" v-model="name" value="12"><br>
        年龄：<input type="text" v-model="age" value="2323">
        <div class="sjkx">
            <h1 class="name">模拟v-model</h1>
        </div>
    </div>
    <script>
        let data = {
            name: '',
            age: '',
        }
        let view = document.getElementById('app')
        // 数据反映到视图方法
        function getVmodelNode(view, data) {
            // a,获取到视图中每个节点的DOM对象，
            let allDom = view.getElementsByTagName("*")
            let allDomArray = Array.from(allDom)//将伪数组转化成数组
            let attributeArray = []
            // b，遍历DOM对象，获取到每个DOM对象对应的node对象。
            allDomArray.forEach(nodeItem => {
               //c, 遍历node对象，过滤获取到node对象中含有v-model的节点
                Array.from(nodeItem.attributes).forEach(item => {
                    if (item.nodeName === 'v-model') {
                        //d,将对应的data的属性值赋值给node节点的value值上
                        nodeItem.value = data[item.nodeValue]
                    }
                })
            })
        }
        //  A,首先需要遍历data的数据，获取到每个data的属性
        Object.keys(data).forEach(key => {
            // B,其次，获取到data的每个属性之后，对属性进行拦截。
            debugger
            WebServer(data,key,data[key])
        })
        function WebServer(data, key, value) {
            Object.defineProperty(data, key, {
                get() {
                    return value
                },
                set(newValue) {
                    value= newValue
                    // C，在拦截时，需要将其值反映到对应的视图标签上。
                    getVmodelNode(view,data)
                }
            })
        }
    </script>
</body>

第二步：视图层到数据层的响应。

视图层响应到数据层的思路：当输入框的数据发生变化的时候，调用函数，将输入框的值赋值给data对应的属性上。

实际上就是在第一步的第C步多加了一步：为对应的node对象绑定一个input事件，并将node的value赋值给data对应的属性上。

<body>
    <div id="app">
        名字：<input type="text" v-model="name" value="12"><br>
        年龄：<input type="text" v-model="age" value="2323">
        <div class="sjkx">
            <h1 class="name">模拟v-model</h1>
        </div>
    </div>
    <script>
        let data = {
            name: '',
            age: '',
        }
        let view = document.getElementById('app')
        // 数据反映到视图方法
        function getVmodelNode(view, data) {
            // a,获取到视图中每个节点的DOM对象，
            let allDom = view.getElementsByTagName("*")
            let allDomArray = Array.from(allDom)//将伪数组转化成数组
            let attributeArray = []
            // b，遍历DOM对象，获取到每个DOM对象对应的node对象。
            allDomArray.forEach(nodeItem => {
               //c, 遍历node对象，过滤获取到node对象中含有v-model的节点
                Array.from(nodeItem.attributes).forEach(item => {
                    if (item.nodeName === 'v-model') {
                        //d,将对应的data的属性值赋值给node节点的value值上
                        nodeItem.value = data[item.nodeValue]
                        //视图层反映到数据层上，
                        nodeItem.addEventListener('input',(e)=>{
                            data[item.nodeValue]=e.target.value
                        })
                    }

                })

            })
        }
        //  A,首先需要遍历data的数据，获取到每个data的属性
        Object.keys(data).forEach(key => {
            // B,其次，获取到data的每个属性之后，对属性进行拦截。
            
            WebServer(data,key,data[key])
        })
        function WebServer(data, key, value) {
            Object.defineProperty(data, key, {
                get() {
                    return value
                },
                set(newValue) {
                    value= newValue
                    // C，在拦截时，需要将其值反映到对应的视图标签上。
                    getVmodelNode(view,data)
                }
            })
        }
       getVmodelNode(view, data)
    </script>
</body>

这就是完整的模拟v-model的代码了。

关于优化，可移步到：

https://blog.csdn.net/qq_31539817/article/details/119992938

这边文章，通过定义发布者模式来实现精确更新。

顺着这个思路，vue中全部的指令源码都可以自己搞定，什么bind呀，什么v-text呀，甚至ref都可以自己搞定！！！！！！

墨痕留绝

关注

10
点赞
踩
23

收藏

觉得还不错? 一键收藏
3
评论
使用JavaScript编写vue指令v-model，v-model原理实现

首先先要知道的是v-model的作用是实现数据的双向绑定，即：数据在视图层的双向响应。实现思路主要分为两步：第一步：数据层到视图的响应将数据响应到视图层的方式，在vue2使用的是Object.defineProperty()来实现，需要劫持到数据的变化，在数据变化的时候将其渲染到视图上：第二步：视图层到数据层的响应...
复制链接

扫一扫