数据变化通知与Vue双向绑定：发布订阅模式实战-优快云博客

本文链接：https://blog.youkuaiyun.com/leilei7407/article/details/118873122

什么时候应该通知订阅者？数据变化的时候
怎么才能检测到数据变化？只要调用了属性的setter方法，就可以认为数据发生了变化，所以可以将通知订阅者（即dep.notify()方法）放在setter中。
————————————
使用Object.defineProperty()进行数据劫持：
通过get()劫持取值操作（可以在执行这个函数时，进行添加订阅者操作）
通过set()劫持赋值操作（可以在执行这个函数时，进行通知所有的订阅者操作）

vue要实现的内容：只要我们为vue中的数据赋值了，这个赋值的动作就会被vue监听到，然后vue就会通知每个订阅者（即dom元素），然后订阅者（即dom元素）就会执行对应的方法（即执行更新dom元素内容的方法）。
vue中订阅者是dom元素，但并不是所有的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>
<body>
    <script>
    
    //实现vue中双向数据绑定
        class Vue{
            constructor(options){
                this.$data=options.data;
                //进行数据劫持，并监听所有属性，如果有变动的，就通知订阅者
                Observe(this.$data)
                //调用模板编译的函数
                Compile(options.el,this)
            }
        }

        //定义监听器Observe
        //用来进行数据劫持，从而实现对数据的监听
        function Observe(obj){
            if(!obj||typeof obj!=='object') return
            const dep = new Dep()

            Object.keys(obj).forEach(key => {
                
                var value=obj[key];
                //递归 （因为value可能也是个对象，所以要进行递归）
                Observe(value);
                Object.defineProperty(obj,key,{
                    enumerable:true,
                    configurable:true,
                    get(){
                    	//if(Dep.target){
                    	//	dep.addSub(Dep.target)
                    	//}
                    	//这一句话和上面含义一样。
                        Dep.target && dep.addSub(Dep.target)
                        return value;
                    },
                    set(newvalue){
                        value=newvalue;
                        Observe(value);
                        //通知每一个订阅者更新自己的文本
                        dep.notify()

                    }
                })


                
            });

        }

        //定义模板解析器Compile
        //即将{{}}中的变量替换成对应的数据
        function Compile(el,vm){
            //获取el对应的dom元素
            vm.$el=document.querySelector(el);
            //创建文档碎片，提高dom操作的性能
            const fragment = document.createDocumentFragment();
            while((childNode=vm.$el.firstChild)){
                fragment.appendChild(childNode)
            }

            //在文档碎片中进行模板编译
            replace(fragment);
            vm.$el.appendChild(fragment);

           
            //定义负责对DOM模板进行编译的方法
            function replace(node){
                //定义匹配插值表达式的正则
                const resMustache = /\{\{\s*(\S+)\s*\}\}/ //{{age}}
        
                //证明当前的 node 节点是一个文本子节点,需要进行正则的替换
                if(node.nodeType === 3){
                    //文本子节点也是一个DOM对象，如果要获取文本子节点字符串的内容，需要调用textContent属性获取   
                    const text = node.textContent    
                    //进行字符串的正则匹配与提取
                    const execResult = resMustache.exec(text)
                    //文本节点中含有插值表达式
                    if(execResult){
                        
                        const value = execResult[1].split('.').reduce((newObj,k)=> newObj[k],vm)
                        //将插值表达式替换成数据
                        node.textContent = text.replace(resMustache, value)
            
                        //创建watcher类的实例
                        new Watcher(vm,execResult[1],(newVal)=>{
                            //定义当数据变化时，如何更新视图
                            node.textContent = text.replace(resMustache, newVal)
                            // console.log(node.textContent)
                        })
                    }
            
                
                    return
                }
        
                //判断当前的属性是否为input输入框
                if(node.nodeType === 1 && node.tagName.toUpperCase() === 'INPUT'){
                    //得到当前元素所有的属性节点
                    const attrs = Array.from(node.attributes) 
                    const findResult = attrs.find((x) => x.name === 'v-model')
                   //是否含有v-model属性
                    if(findResult){
                        //获取当前v-model属性的值
                        const expStr = findResult.value
                        const value = expStr.split('.').reduce((newVal,key)=>newVal[key],vm)
                        console.log(value)
                        node.value = value
        
                        //创建Watcher的实例
                        new Watcher(vm, expStr, (newVal)=>{
                            node.value = newVal
                        })
        
                        //监听文本框的input输入事件，拿到文本框最新的值，把最新的值更新到vm上
                        node.addEventListener('input',(e)=>{
                            const keyArr =  expStr.split('.')
                            const obj = keyArr.slice(0,keyArr.length - 1).reduce((newVal,k)=>newVal[k],vm)
                            obj[keyArr[keyArr.length - 1]] = e.target.value  
                        })
                    }
                }
        
                //证明不是文本节点，可能是一个DOM元素，需要进行递归处理
                node.childNodes.forEach(child=>replace(child))
            }

                

        }


     //下面是实现发布订阅模式
        
    //收集订阅者watcher的类（Dep类进行订阅收集，又称为消息订阅器）
        class Dep{

            constructor(){
                //这个数组用来存放所有的订阅者
                this.subs=[];

            }

            //向subs数组中添加订阅者的方法
            addSub(watcher){
                this.subs.push(watcher);
            }
            //定义负责通知每个订阅者watcher的方法（即发布通知的方法）
            //所谓的发布通知就是循环订阅者数组，然后执行订阅者提供的update方法，从而达到通知订阅者的目的。
            //所以update就是用来通知订阅者的，相当于读者留下的号码。
            //当通知到订阅者后，订阅者会执行自身的回调函数。
            notify(){
                this.subs.forEach(watcher=>watcher.update());
            }

        }

        //订阅者类
        class Watcher{
            //cb回调函数中，记录着当前watcher如何更新自己的文本内容。
            //但是，只知道如何更新自己还不行，还必须拿到最新的数据
            //因此，在new watcher期间，要把vm也传进来（因为vm中保存着最新的数据）
            //除此之外，还需要知道，在vm身上众多的数据中，哪个数据才是当前自己所需要的数据。
            //因此，在new watcher期间，要把指定watcher对应的数据名字传进来
            constructor(vm,key,cb){
                this.cb=cb;
                this.vm=vm;
                this.key=key;
                //将创建的Watcher实例存到Dep实例的subs数组中
                Dep.target = this  //target为自定义的一个属性
                //这里会调用 Observe上面数据劫持的getter，将 Dep.target,即this传进去
                key.split('.').reduce((newObj,k) => newObj[k],vm)
                Dep.target = null

            }

            //watcher的实例需要有一个update方法，从而能让发布者能够通知我们进行数据更新。
            //定义update方法，让别人能够通知自己
            update(){
                const value = this.key.split('.').reduce((newObj,k) => newObj[k],this.vm)
                this.cb(value)
                // console.log(this.key)
            }

        }
    </script>
    
</body>
</html>

vue双向数据绑定原理