学习手写vue，理解原理

Posted 2020-11-24 chengyunshen

class Compiler{
    constructor(el,vm){
        // 判断el属性  是不是 一个元素, 如果不是就获取
        this.el  = this.isElementNode(el)?el:document.querySelector(el);
        // console.log(this.el);
        
        
        this.vm = vm;
        
        // 把当前节点放到内存中
        let fragment = this.node2fragment(this.el);
        // console.log(fragment,"fragment")
        
        // 把节点中的内容进行替换
        
        // 用数据编译模板
        this.compile(fragment)
        
        // 把结果再塞到页面中
        this.el.appendChild(fragment);
        
    }
    
    isDirective(attrName){
        return attrName.startsWith('v-');
    }
    // 编译元素的
    compileElement(node){
        let attributes = node.attributes;
        [...attributes].forEach(attr=>{
            let {name,value:expr} = attr;
            // console.log(name,value,"attr");
            // 判断是不是指令
            if(this.isDirective(name)){
                let [,directive] = name.split("-");
                
                let [directiveName,eventName] =  directive.split(":");  //v-on:click
                CompileUtils[directiveName](node,expr,this.vm, eventName);
            }
        })
    }
    
    // 编译文本的 
    compileText(node){
        let content = node.textContent;
        // console.log(content)
        if(/{{(.+?)}}/.test(content)){
            console.log(content,"文本"); //找到所有文本
            CompileUtils['text'](node,content,this.vm);
        }
    }
    
    // 用来编译内存中的dom节点   核心编译方法
    compile(node){
        let childNodes = node.childNodes; 
        [...childNodes].forEach(child=>{
            if(this.isElementNode(child)){
                this.compileElement(child);
                // console.log("element",child);
                // 如果是元素  需要再次编译子节点
                this.compile(child);
            }else{
                this.compileText(child);
                // console.log("text",child)
            }
        })
        // console.log(childNodes)
    }
    
    
    // 把节点移动到内存中
    node2fragment(node){
        // 创建一个文档碎片 
        let fragment = document.createDocumentFragment();
        let firstChild;
        while(firstChild = node.firstChild){
            // appendChild 具有移动性
            fragment.appendChild(firstChild);
        }
        return fragment;
    }
    isElementNode(node){  //是不是元素节点
        return node.nodeType === 1;
    }
}

CompileUtils = {
    // 根据表达式取到对应的数据
    getVal(vm,expr){
        return expr.split(".").reduce((data,current)=>{
            return data[current];
        },vm.$data)
    },
    
    // 设置值
    setValue(vm,expr,value){
        expr.split(".").reduce((data,current,index,arr)=>{
            if(index == arr.length-1){
                data[current] = value;
            }
            return data[current];
        },vm.$data)
    },
    // 解析v-model指令
    model(node,expr,vm){  //node是节点  expr 是表达式 vm是实例
        // 给输入框赋予value   node.value = xxx
        let fn = this.updater['modelUpdater'];
        
        // 给输入框加一个观察者,如果数据更新了 会触发此方法,会拿新值给输入框赋值
        new Watcher(vm,expr,(newVal)=>{
            fn(node,newVal);
        });
        
        node.addEventListener('input',(e)=>{
            let value = e.target.value;  //获取用户输入的内容
            this.setValue(vm,expr,value);
        })
        let value = this.getVal(vm,expr); 
        fn(node,value);
    },
    html(node,expr,vm){
        let fn = this.updater['htmlUpdater'];
        
        // 给输入框加一个观察者,如果数据更新了 会触发此方法,会拿新值给输入框赋值
        new Watcher(vm,expr,(newVal)=>{
            fn(node,newVal);
        });
        let value = this.getVal(vm,expr); 
        fn(node,value);
    },
    
    on(node,expr,vm,eventName){ //expr  就是 change
        node.addEventListener(eventName,(e)=>{
            vm[expr].call(vm,e);  //这里需要把  methods 绑定到 vm上
        })
    },
    
    getContentValue(vm,expr){
        // 遍历表达式 将内容重新替换成完整的内容
        return expr.replace(/{{(.+?)}}/g,(...args)=>{
            return this.getVal(vm,args[1]);
        })
    },
    text(node,expr,vm){
        let fn = this.updater['textUpdater'];
        let content = expr.replace(/{{(.+?)}}/g,(...args)=>{
            
            // 给表达式每个{{}}  都加上观察者
            new Watcher(vm,args[1],()=>{
                fn(node,this.getContentValue(vm,expr)); //返回一个全的字符串
            })
            return this.getVal(vm,args[1]);
        });
        fn(node,content);
    },
    updater:{
        // 把数据插入到节点中
        modelUpdater(node,value){
            node.value = value;
        },
        htmlUpdater(node,value){  //xss攻击
            node.innerHTML = value;
        },
        //处理文本节点
        textUpdater(node,value){
            node.textContent = value;
        }
    },
    
    
}

// 实现数据劫持的功能
class Observer{
    constructor(data){
        console.log(data);
        this.observe(data);
    }
    observe(data){
        if(data && typeof data == "object"){
            // 如果是对象
            for(let key in data){
                this.defineReactive(data,key,data[key]);
            }
        }
    }
    
    defineReactive(obj,key,value){
        this.observe(value);
        let dep = new Dep(); //给每个属性都加上 发布订阅的功能
        Object.defineProperty(obj,key,{
            get(){
                
                // 创建watcher时 会取到对应的内容, 并且把watcher放到了全局上
                Dep.target && dep.subs.push(Dep.target);
                return value;
            },
            set:(newVal)=>{
                if(newVal != value){
                    this.observe(newVal);
                    value = newVal;
                    dep.notify();
                }   
            }
        })
    }
}

// 观察者 (发布订阅)
class Dep{
    constructor() {
        this.subs = [];  //存放所有的watcher
    }
    // 订阅
    addSub(watcher){  //添加watcher
        this.subs.push(watcher);
    }
    // 发布
    notify(){
        this.subs.forEach(watcher=>watcher.update());
    }
    
}
class Watcher{
    constructor(vm,expr,cb){
        this.vm  = vm;
        this.expr = expr;
        this.cb = cb;
        // 默认先存放一个老值
        this.oldValue = this.get();
    }
    
    get(){
        Dep.target = this;  //先把自己放在Dep.target上
        
        // 取值,把这个观察者和数据关联起来
        let value = CompileUtils.getVal(this.vm,this.expr);
        Dep.target = null;  //不取消, 任何值取值  都会添加 watcher
        return value;
    }
    update(){  //更新操作,数据变化后 会调用观察者的update方法
        let newVal = CompileUtils.getVal(this.vm,this.expr);
        if(newVal !== this.oldValue){
            this.cb(newVal);
        }
    }
}

class Vue{
    constructor(options){
        this.$el = options.el;
        this.$data = options.data;
        
        let computed = options.computed;
        
        let methods = options.methods;
        
        // 这个根元素 存在编译模板
        if(this.$el){ 
            
            // 把数据全部转化成用Object.defineProperty来定义.
            new  Observer(this.$data);
            
        
            // 计算属性
            for(let key in computed){  //有依赖关系
                Object.defineProperty(this.$data,key,{
                    get:() => {
                        return computed[key].call(this);
                    }
                })
            }
            
            
            // 绑定到vm上 进行代理 
            for(let key in methods){
                Object.defineProperty(this,key,{
                    get(){
                        return methods[key];
                    }
                })
            }
            
            //把数据获取操作  vm上的取值操作 都代理到 vm.$data
            this.proxyVm(this.$data);
            
            console.log(this.$data,"$data")
            new Compiler(this.$el,this);
        }
    }
    // 实现可以通过vm取到对应的data中的值
    proxyVm(data){
        for(let key in data){
            Object.defineProperty(this,key,{
                get(){
                    return data[key];  //进行转化操作
                },
                set(newVal){  //设置代理方法
                    data[key] = newVal;
                }
            })
        }
    }
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <input  v-model="school.name" />
            {{school.name}}
            <div>{{school.name}}</div>
            <div>teacher:{{teacher.name}}</div>
            <!-- 如果数据不变化 视图就不会刷新 -->
            {{getNewName}}
            
            <button v-on:click="change">更新</button>
            
            <div v-html="message"></div>
        </div>
        <script src="./vue.js"></script>
        <script>
            let vm = new Vue({
                el:'#app',
                data:{
                    school:{
                        name:"chance",
                        age:30
                    },
                    teacher:{
                        name:'123'
                    },
                    message:"<h1>welcome</h1>"
                },
                methods:{
                    change(){
                        this.school.name = "希望小学"
                    }
                },
                computed:{
                     getNewName(){
                         return this.school.name + "附属学校"
                     }
                }
            })
        </script>
    </body>
</html>