手动实现Vue双向数据绑定

最新推荐文章于 2024-04-12 15:32:24 发布

大横按真简单

最新推荐文章于 2024-04-12 15:32:24 发布

阅读量429

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_58054203/article/details/121138055

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

所实现的效果

在这里插入图片描述

<div id="app">
        <input type="text" v-model="text">
        {{ text }}
 </div>

var vm = new Vue(
            {
                el: 'app',
                data:{
                    text:'hello world'
                }
            }
        )

任务拆分一下

将vm实例中的data中的内容绑定到输入框以及文本节点当中。
当输入框改变时，vm实例中的data的内容也跟着改变，实现 view => modle。
当data中的内容发生变化的时候，输入框的内容以及文本节点的内容也发生变化，实现 modle=> view。

实现任务一

实现内容绑定，我们先需要将这个id为app的节点劫持过来，这里运用了DocuemntFragment（碎片化文档）概念，

DocuemntFragment（碎片化文档）：把它认为是一个dom节点的容器，当你创造了10个节点，当每个节点都插入到文档当中都会引发一次浏览器的回流，也就是说浏览器要回流10次，十分消耗资源。而使用碎片化文档，也就是说我把10个节点都先放入到一个容器当中，最后我再把容器直接插入到文档就可以了！浏览器只回流了1次。

还有，当我们使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点

var dom = nodeToFragment(document.getElementById(id))
function nodeToFragment(node ) {
            var fragment = document.createDocumentFragment();
            var child;
            while (child = node.firstChild) {
                fragment.appendChild(child)
            }
            return fragment
        }

碎片化文档是将子节点都劫持了过来，而我的id为app的div内已经没有内容了。
在这里插入图片描述

同时要主要我while的判断条件。判断是否有子节点，因为我每次appendChild都把node中的第一个子节点劫持走了，node中就会少一个，直到没有的时候，child也就变成了undefined，也就终止了循环。

现在我们的考虑两个问题：1. 如何绑定要input上，2. 如何绑定要文本节点中
我们已经获得了app的所有子节点，对每一个节点进行处理，看是不是有跟vm实例中有关联的内容，如果有，修改这个节点的内容。然后重新放入，所以我们需要对所有子节点进行编译，如果有input绑定v-model属性或者有{undefined{ xxx }}的文本节点出现，就进行内容替换，替换为vm实例中的data中的内容：

// 编译函数
        function compile(node , vm) {
            var reg = /\{\{(.*)\}\}/; // 来匹配 {{ xxx }} 中的xxx
            // 匹配元素节点
            if(node.nodeType === 1 ) {
                // 获取节点上的所有属性
                var attr = node.attributes;
                // 解析属性
                for (let i = 0; i < attr.length; i++) {
                    if(attr[i].nodeName == 'v-model'){
                        var name = attr[i].nodeValue;  // 与哪一个数据有关
                        node.addEventListener('input' , function(e) {
                            vm[name] = e.target.value
                        })
                        node.value = vm[name]; // 将data的值赋给该node
                        node.removeAttribute('v-model');
                    }
                }
                console.log(node)
            }
            // 匹配文本节点
            if(node.nodeType === 3 ){
                if(reg.test(node.nodeValue)){                    
                    var name = RegExp.$1;
                    name = name.trim() // .trim() 删除字符串开始和末尾的空格
                    console.log(name) // text
                    // node.nodeValue = vm[name]
                    // console.log(node.nodeValue)
                    new Watcher(vm , node , name)
                }
            }
            // console.log(node)
            // console.log(node.nodeType)
        }

在向碎片化文档中添加节点时，每个节点都处理一下。

function nodeToFragment(node , vm) {
            var fragment = document.createDocumentFragment();
            var child;
            while (child = node.firstChild) {
                compile(child , vm) //------处理节点
                fragment.appendChild(child)
            }
            return fragment
        }

创建一下vue实例：

// Vue构造函数
       function Vue(options) {
            this.data = options.data   
            var id = options.el
            var dom = nodeToFragment(document.getElementById(id) , this) // this -> Vue{}
            console.log(dom)
            // 处理完所有的dom节点 ，重新将内容添加回去
            document.getElementById(id).appendChild(dom)
        }

到这一步我们成功将内容都绑定到了输入框与文本节点上，任务一完成了。

实现任务二

输入框改变，vm中的data也会改变，该怎么办呢？我们可以通过事件监听keyup，input等，来获取输入框最新的value，然后通过Object.defineProperty将获取的最新的value，赋值给实例vm的text。
话不多说，首先实现一个响应式监听属性的函数，来监听输入框的属性，一旦有赋新值就发生变化：

语法：
Object.defineProperty(obj, prop, descriptor)
其中：
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符

 //响应式监听属性函数
        function defineReactive(obj , key , val) {
            Object.defineProperty(obj , key , {
                get:function(){
                    return val
                },
                set:function(newVal){
                    if(newVal === val){
                        return
                    }
                    val = newVal;
                    console.log('新值：' + val)
                }
            })
        }

然后实现一个观察者函数

 // 观察者函数
        function observe(obj,vm) {
            for(let key of Object.keys(obj)){
                defineReactive(vm , key , obj[key]);
            }
        }

在vue实例函数中，观察data中的所有属性值，添加observe

 // Vue构造函数
       function Vue(options) {
            this.data = options.data
            var data = this.data
            observe(data,this) // ----------------添加observe，来观察data的属性
            var id = options.el
            var dom = nodeToFragment(document.getElementById(id) , this) // this -> Vue{}
            console.log(dom)
            // 处理完所有的dom节点 ，重新将内容添加回去
            document.getElementById(id).appendChild(dom)
            // console.log()
        }

最终实现了任务二view => model 通过修改输入框 vm实例中的属性也跟着变化了。

实现任务三

通过修改vm实例的属性该改变输入框的内容与文本节点的内容。这里涉及到一个问题需要我们注意，当我们修改输入框，改变了vm实例的属性，这是1对1的。但是，我们可能在页面中多处用到 data中的属性，这是1对多的。也就是说，改变1个model的值可以改变多个view中的值。这就需要我们引入一个新的知识点：

订阅/发布者模式
订阅发布模式（又称观察者模式）定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。
发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作

我们new一个vue实例干了两件事：
第一个是监听数据：observe(data)；
第二个是编译 HTML：nodeToFragement(id)

在监听数据的过程中，我们会为 data 中的每一个属性生成一个主题对象 dep。
在编译 HTML 的过程中，会为每个与数据绑定相关的节点生成一个订阅者 watcher，watcher 会将自己添加到相应属性的 dep 容器中。
我们已经实现：修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的 set 方法。

所以现在我们要实现：监听到输入框的属性发生改变，使得data中的数据发生改变发出通知，对应的主题对象dep收到通知调用notify()，使得订阅者出发自身的update方法，从而改变视图
在这里插入描述
在编译的时候给文本节点添加一个 Watcher 订阅者：
在这里插入图片描述
Watcher 订阅者首先执行自身的update 方法，进而执行了 get 方法，get 的方法读取了 vm 的访问器属性，有调用的访问器的get方法

将该自己添加到了对应访问器属性的 dep 中；
最后，将 Dep.target 设为空（Dep.target = null）。因为它是全局变量，也是 watcher 与 dep 关联的唯一桥梁，任何时刻都必须保证 Dep.target 只有一个值。
当对应属性发生变化，会执行set方法，使得对应主题dep调用notify()发生发出通知，对应订阅者watcher 会调用自身update方法，使得试图更新

最后手打源码奉上：

       // Vue构造函数
       function Vue(options) {
            this.data = options.data
            var data = this.data
            observe(data,this)
            
            var id = options.el
            var dom = nodeToFragment(document.getElementById(id) , this) // this -> Vue{}
            console.log(dom)
            // 处理完所有的dom节点 ，重新将内容添加回去
            document.getElementById(id).appendChild(dom)
            // console.log()
        }

        function nodeToFragment(node , vm) {
            var fragment = document.createDocumentFragment();
            var child;
            while (child = node.firstChild) {
                compile(child , vm)
                fragment.appendChild(child)
            }
            return fragment
        }
        // 编译函数
        function compile(node , vm) {
            var reg = /\{\{(.*)\}\}/; // 来匹配 {{ xxx }} 中的xxx
            // 匹配元素节点
            if(node.nodeType === 1 ) {
                // 获取节点上的所有属性
                var attr = node.attributes;
                // 解析属性
                for (let i = 0; i < attr.length; i++) {
                    if(attr[i].nodeName == 'v-model'){
                        var name = attr[i].nodeValue;  // 与哪一个数据有关
                        node.addEventListener('input' , function(e) {
                            vm[name] = e.target.value
                        })
                        node.value = vm[name]; // 将获取的最新的value，赋值给实例vm的text
                        node.removeAttribute('v-model');
                    }
                }
                console.log(node)
            }
            // 匹配文本节点
            if(node.nodeType === 3 ){
                if(reg.test(node.nodeValue)){                    
                    var name = RegExp.$1;
                    name = name.trim() // .trim() 删除字符串开始和末尾的空格
                    console.log(name) // text
                    // node.nodeValue = vm[name]
                    // console.log(node.nodeValue)
                    new Watcher(vm , node , name)
                }
            }
            // console.log(node)
            // console.log(node.nodeType)
        }
        // 观察者函数
        function observe(obj,vm) {
            // 把每个属性都进行响应式监听
            for(let key of Object.keys(obj)){
                defineReactive(vm , key , obj[key]);
            }
        }
        //响应式监听属性函数
        function defineReactive(obj , key , val) {
            var dep = new Dep()
            Object.defineProperty(obj , key , {
                get:function(){
                    if(Dep.target){
                        dep.addSub(Dep.target) // 将该自己添加到了对应访问器属性的 dep 中；
                    }
                    return val
                },
                set:function(newVal){
                    if(newVal === val){
                        return
                    }
                    val = newVal;
                    console.log('新值：' + val)
                    dep.notify();
                }
            })
        }
        // Watcher构造函数
        function Watcher(vm,node,name) {
            Dep.target = this;
            this.vm = vm;
            this.node = node;    
            this.name = name;
            this.update(); // watcher 会将自己添加到相应属性的 dep 容器中
            Dep.target = null
            // console.log(Dep.target)
        }
        Watcher.prototype = {
            update(){
                this.get();
                this.node.nodeValue = this.value; // 注意，这是更改节点内容的关键
            },
            get(){
                this.value = this.vm[this.name]; // 触发相应的get
            }
        }
        // dep构造函数
        function Dep() {
            this.subs = [];
        }
        Dep.prototype = {
            addSub(sub){
                this.subs.push(sub);
            },
            notify(){
                this.subs.forEach(
                    function(sub) {
                        sub.update()
                    }
                )
            }
        }
        
        var vm = new Vue(
            {
                el: 'app',
                data:{
                    text:'hello world'
                }
            }
        )

大横按真简单

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手动实现Vue双向数据绑定

所实现的效果<div id="app"> <input type="text" v-model="text"> {{ text }} </div>var vm = new Vue( { el: 'app', data:{ text:'hello world' }
复制链接

扫一扫

专栏目录