自己写一个简易版的vue

超、凢脫俗 2021-09-16 07:10 426阅读 0赞

vue原理图

![70][]

1.html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style>
        .p_color{
            color:red;
        }
        .aa{
            font-size: 20px;
        }
    </style>
    
    <body>
        <div id="app">
            
            <p>{
       {name}}</p>
            <button v-on:click="show">点我</button>
            <p v-text="msg"></p>
            <p v-html="msg"></p>
            <p class="aa" v-class="myClass">{
       {name}}</p>
    
            
            <p>{
       {name}}</p>
            <p>{
       {msg.age}}</p>
            <button v-on:click="update">更新</button>
            <input type="text" v-model="info">
            <p>{
       {info}}</p>
        </div>
    </body>
    
    <script src="mvvm.js"></script>
    
    <script src="compile.js"></script>
    
    <script src="observe.js"></script>
    
    <script src="watcher.js"></script>
    
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: '懂懂',
                age: 17,
                msg: '<a href="https://www.baidu.com" target="_blank">百度一下</a>',
                myClass: 'p_color',
                info: '西北望'
            },
            methods: {
                show: function () {
                    alert('这个人很帅')
                },
                update: function () {
                    this.name = "dongdong";
                    this.msg.age = 18
                }
            }
        });
    </script>
    
    </html>

2.双向数据绑定(mvvm)

//双向数据绑定核心
    
    function Vue(options) {//ps:vm是Vue的实例
        this.$options = options; //将配置对象保存到vm中
        var data = this._data = this.$options.data; //将data对象保存到vm和变量data中
        var _this = this; //保存vm到变量_this
    
        //遍历data中所有的属性
        Object.keys(data).forEach(function (key) { //key是data的属性名,键值对里面的键
            _this._proxy(key);
        })
    
        //keys()方法是取出对象的属性名,保存为数组形式
        // var obj = {
        //     'a': '123',
        //     'b': '345'
        // };
        // console.log(Object.keys(obj)); //['a','b']
    
        //对data中所有层次的属性通过数据劫持实现数据绑定
        observe(data,this);//创建dep
    
        //创建一个编译对象(解析模板)
        this.$compile=new Compile(options.el||document.body,this);//创建watcher
    
    }
    Vue.prototype={
        constructor:Vue,
       /* 
        @method 实现指定属性代理的方法 
        @param key:属性名 
       */
        _proxy:function(key){
            var _this=this;
            //给vm添加指定属性名的属性(使用的是属性描述符)
            Object.defineProperty(_this,key,{
                configurable:false,//不能重新定义
                //官方定义:表示能否通过delete删除此属性，能否修改属性的特性，或能否修改把属性修改为访问器属性，默认为 false。如果直接使用字面量定义对象，默认值为true
                
                enumerable:true,//枚举,就是遍历,循环
                //官方定义:表示该属性是否可枚举，即是否通过for-in循环或Object.keys()返回属性，默认为 false。如果直接使用字面量定义对象，默认值为true
                
                get:function(){//当通过vm.xxx读取属性值时调用,从data中获取相对应的属性值放回  代理读操作
                    return _this._data[key];
                },
                //官方定义:一个给属性提供 getter 的方法(访问对象属性时调用的函数,返回值就是当前属性的值)，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined
                
                set:function(newValue){//当通过vm.xxx = value时,value被保存到data中对应的属性上 代理写操作
                    _this._data[key]=newValue;
                }
                //官方定义:一个给属性提供 setter 的方法(给对象属性设置值时调用的函数)，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined
            })
        }
    }

3.模板解析(compile)

3.1模板解析的基本流程

1) 将el的所有子节点取出,添加到一个新建的文档fragment对象中

2) 对fragment中的所有层次子节点递归进行编译处理

3) 将解析后的fragment添加到el中显示

3.2\{ \{\}\}表达式的解析

1) 根据正则对象得到匹配出的表达式字符串:  子匹配/RegExp

2) 从data中取出表达式对应的属性值

3) 将属性值设置为文本节点的textContent

3.3事件指令解析

1) 从指令中取出事件名

2) 根据指令的值(表达式)从methods中得到对应的事件处理函数对象

3) 给当前元素节点绑定指定事件名和回调函数的 dom 事件监听

4) 指令解析完后,移除此指令属性

3.4一般指令解析

1) 得到指令名和指令值(表达式)  text/html/class

2) 从data中根据表达式得到对应的值

3) 根据指令名确定需要操作元素节点的什么属性

v-text----textContent属性

4) 将得到的表达式的值设置到对应的属性上

5) 移除元素的指令属性

//指令编译(解析指令)
    
    function Compile(el, vm) {
        //保存vm到compile对象
        this.$vm = vm;
        //将el对应的元素对象保存到compile对象中
        this.$el = this.isElementNode(el) ? el : document.querySelector(el);
        //如果有el元素
        if (this.$el) {
            //1.取出el元素中所有子节点保存到一个fragment对象中
            this.$fragment = this.node2Fragment(this.$el);
            //2.编译fragment中所有层次子节点
            this.init();
            //3.将编译好的fragment添加到页面的el元素中
            this.$el.appendChild(this.$fragment);
        }
    }
    
    Compile.prototype = {
        constructor: Compile,
        node2Fragment: function (el) {
            //创建空的fragment
            var fragment = document.createDocumentFragment(),
                child;
            //将el中所有子节点转移到fragment
            //child等于他的第一个节点,如果存在就加入到虚拟节点里面,直到全部加入,结束
            while (child = el.firstChild) {
                fragment.appendChild(child);
            }
            //返回fragment
            return fragment;
        },
    
        init: function () {
            //编译指定元素(所有层次的子节点)
            this.compileElement(this.$fragment);
        },
    
        compileElement: function (el) {
            //取出最外层所有的字节点
            var childNodes = el.childNodes,
                //报错compile对象
                _this = this;
    
            //遍历所有子节点(text/element)
            //[].sliec.call(),兼容的写法,把括号里面的转化成真正的数组,比如一些伪数组
            [].slice.call(childNodes).forEach(function (node) {
                //得到节点的文本内容
                var text = node.textContent;
                //创建正则对象(匹配大括号表达式)
                var reg = /\{\{(.*)\}\}/;
    
                //判断节点是否是一个元素节点
                if (_this.isElementNode(node)) {
                    //编译(解析指令)
                    _this.compile(node);
    
                    //判断节点是否是大括号格式的文本节点
                } else if (_this.isTextNode(node) && reg.test(text)) {
                    //编译大括号表达式文本节点
                    _this.compileText(node, RegExp.$1);
                }
    
                //如果当前节点还有子节点,通过递归调用实现所有层次节点的编译
                if (node.childNodes && node.childNodes.length) {
                    _this.compileElement(node);
                }
            });
        },
    
        compile: function (node) {
            //得到标签的所有属性
            var nodeAttrs = node.attributes,
                _this = this;
            //遍历所有属性
            [].slice.call(nodeAttrs).forEach(function (attr) {
                //得到属性名: v-on:click
                var attrName = attr.name;
                //判断是否是指令属性
                if (_this.isDirective(attrName)) {
                    //得到属性值--表达式:show
                    var exp = attr.value;
                    //从属性名中得到指令名: on:click
                    var dir = attrName.substring(2);
                    //是否是事件指令
                    if (_this.isEventDirective(dir)) {
                        //解析处理事件指令
                        compileUtil.eventHandler(node, _this.$vm, exp, dir);
                        //普通指令
                    } else {
                        //编译指令属性
                        compileUtil[dir] && compileUtil[dir](node, _this.$vm, exp);
                    }
    
                    //移除指令属性
                    node.removeAttribute(attrName);
                }
    
            })
        },
    
        compileText: function (node, exp) {
            compileUtil.text(node, this.$vm, exp);
        },
    
        isDirective: function (attr) {
            return attr.indexOf('v-') == 0;
        },
    
        isEventDirective: function (dir) {
            return dir.indexOf('on') === 0;
        },
    
        isElementNode: function (node) {
            return node.nodeType == 1;
        },
    
        isTextNode: function (node) {
            return node.nodeType == 3;
        }
    }
    
    
    
    //包含多个解析指令的方法的工具对象
    var compileUtil = {
        //解析v-text/{
       {}}
        text: function (node, vm, exp) {
            this.bind(node, vm, exp, 'text');
        },
        //解析v-html
        html: function (node, vm, exp) {
            this.bind(node, vm, exp, 'html');
        },
        //解析v-model
        model: function (node, vm, exp) {
            this.bind(node, vm, exp, 'model');
    
            var _this = this,
            val = this._getVMVal(vm, exp);
            node.addEventListener('input', function (e) {
                //得到输入的最新值
                var newValue = e.target.value;
                if (val === newValue) {
                    return;
                }
                //将最新的value保存给表达式所对应的属性
                _this._setVMVal(vm, exp, newValue);
                //保存最新的值
                val =newValue;
            })
        },
        //解析v-class
        class: function (node, vm, exp) {
            this.bind(node, vm, exp, 'class');
        },
    
        bind: function (node, vm, exp, dir) {
            //得到更新节点的函数
            var updaterFn = updater[dir + 'Updater'];
            //调用函数更新节点
            updaterFn && updaterFn(node, this._getVMVal(vm, exp));
    
            //实现更新显示,数据改变会动态更新(监视器)
            new Watcher(vm, exp, function (value, oldValue) { //回调函数关注的两个点:1.什么时候调用 2.用来做什么 3.this指向
                updaterFn && updaterFn(node, value, oldValue);//当表达式对应的一个属性值变化时回调
            });
        },
    
        //事件处理
        eventHandler: function (node, vm, exp, dir) {
            //得到事件类型/名:click
            var eventType = dir.split(':')[1],
                //从methods中得到表达式所对应的函数(事件回调函数)
                fn = vm.$options.methods && vm.$options.methods[exp];
            //如果都存在
            if (eventType && fn) {
                //bind的意义是给节点绑定指定事件名和回调函数(强制绑定this为vm)的DOM事件监听
                node.addEventListener(eventType, fn.bind(vm), false);
            }
    
        },
    
        //从vm中得到表达式所对应的值
        _getVMVal: function (vm, exp) {
            var val = vm._data;
            exp = exp.split('.');
            exp.forEach(function (k) {
                val = val[k];
            });
            return val;
        },
        _setVMVal: function (vm, exp, value) {
            var val = vm._data;
            exp = exp.split('.');
            exp.forEach(function (k,i) {
                if(i<exp.length - 1){
                    val = val[k];
                }else{
                    val[k]=value
                } 
            });
            return val;
        },
    };
    
    //包含多个更新节点的方法的工具对象
    var updater = {
        //更新节点的textContent属性值
        textUpdater: function (node, value) {
            node.textContent = typeof value == 'undefined' ? '' : value;
        },
        //更新节点的innerHTML属性值
        htmlUpdater: function (node, value) {
            node.innerHTML = typeof value == 'undefined' ? '' : value;
        },
        //更新节点的className属性值
        classUpdater: function (node, value, oldValue) {
            //静态class 属性的值
            var className = node.className;
            //将静态class属性的值与动态class值进行合并后设置为新的className属性值
            className = className.replace(oldValue, '').replace(/\s$/, '');
            //类名之间要加空格
            var space = className && String(value) ? ' ' : '';
    
            node.className = className + space + value;
        },
    
        //更新节点的value属性值
        modelUpdater: function (node, value, oldValue) {
            node.value = typeof value == 'undefined' ? '' : value;
        }
    }

4.劫持监听(observe)

4.1数据绑定

1)一旦更新了data中的某个属性数据,所有界面上直接使用或间接使用了此属性的节点都会更新

4.2数据劫持

1)数据劫持时vue中用来实现数据绑定的一种技术

2) 基本思想: 通过defineProperty()来监视data中所有属性(任意层次)数据的变化,一旦变化就是更新界面

4.3数据代理

1) 数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写)

2) vue数据代理: 通过vm对象来代理data对象中所有属性的操作

3) 好处: 更方便的操作data 中的数据

4) 基本实现流程

a.  通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符

b.  所有添加的属性都包含 getter/setter

c.  getter/setter 内部去操作 data 中对应的属性数据

//劫持监听所有属性
    function Observe(data) {
        //保存data
        this.data = data;
        //开始对data的监视
        this.walk(data);
    }
    
    Observe.prototype = {
        walk: function (data) {
            //保存observe对象
            var _this = this;
            //遍历data中所有属性
            Object.keys(data).forEach(function (key) {
    
                //对指定的属性实现响应式的数据绑定
                _this.defineReactive(_this.data, key, data[key])
            })
        },
    
        defineReactive: function (data, key, val) {
            var dep = new Dep();
            //实现data中所有层次的数据劫持
            var childObj = observe(val); //如果data里面属性是一个对象,递归编译
    
            //给data重新定义属性,添加set/get方法
            Object.defineProperty(data, key, {
                enumerable: true, //可枚举
                configurable: false, //不能重新定义,不能再define
                get: function () { //取数据的时候get,建立dep与watcher之间的关系
                    if (Dep.target) {
                        dep.depend(); //建立关系
                    }
                    return val;
                },
                set: function (newVal) { //修改数据的时候set,,监视key属性的变化,更新界面
                    if (newVal === val) {
                        return;
                    }
                    val = newVal;
                    //新的值object的话,进行监视
                    childObj = observe(newVal);
                    //通知所有相关的订阅者
                    dep.notify();
                }
            })
        }
    }
    
    function observe(value, vm) {
        //被观察的是一个对象
        if (!value || typeof value !== 'object') {
            return;
        }
        //创建对应的Observe对象(观察者)
        return new Observe(value)
    }
    
    
    var uid = 0;
    
    function Dep() {
        this.id = uid++;
        this.subs = []; //多个订阅者的数组,存放Watcher
    }
    
    Dep.prototype = {
        //添加watcher到dep中
        addSub: function (sub) {
            this.subs.push(sub);
        },
    
        //去建立dep与watcher之间的关系
        depend: function () {
            Dep.target.addDep(this);
        },
    
        removeSub: function (sub) {
            var index = this.subs.indexOf(sub);
            if (index != -1) {
                this.subs.splice(index, 1);
            }
        },
    
        notify: function () {
            //遍历所有watcher,通知watcher更新
            this.subs.forEach(function (sub) {
                sub.update();
            });
        }
    };
    
    Dep.target = null;

5.订阅者(watcher)

5.1Dep与Watcher

Dep  
    1.他的实例什么时候创建?  
        初始化的给data的属性进行数据劫持时创建的(data\{\})  
    2.个数  
        与data中的属性一一对应  
    3.Dep的结构?  
        id: 标识  
        subs: n个相关的watcher的容器

Watcher  
    1.它的实例什么时候创建?  
        初始化的解析大括号表达式/一般指令时创建(\{ \{\}\},v-...)  
    2.个数  
        与模板中表达式(不包含事件指令)  
    3.watcher的结构  
        this.cb = cb;  //用于更新界面的回调  
        this.vm = vm;   //vm  
        this.exp = exp;     //对应的表达式  
        this.depIds = \{\};   //相关的n个dep的容器对象  
        this.value = this.get();    //当前表达式对应的value

Dep与Watcher之间的关系

1.什么关系?  
        多对多的关系  
        data属性-->Dep-->n个watcher(属性在模板中多次被使用: <p v-text="name">\{ \{name\}\}</p>)   
        表达式-->Watcher-->n个Dep(多层表达式: data.msg.name)  
    2.如何建立的?  
        data中属性的get()中建立  
    3.什么时候建立?  
        初始化的解析模板中的表达式创建watcher对象时

vm.name = 'abc'--->data中name属性值变化--->name的set()调用--->dep--->相关的所有watcher  
        -->cb() --->updater

//添加订阅者
    function Watcher(vm, exp, cb) {
        this.cb = cb;// 更新界面的回调
        this.vm = vm;
        this.exp = exp; //表达式
        this.depIds = {}; //包含所有相关的dep的容器对象
        this.value = this.get(); //得到表达式的初始值保存
    }
     
    Watcher.prototype = {
        update: function(){
            this.run();
        },
        run: function(){
            var value = this.get();
            var oldVal = this.value;
            if(value !==oldVal) {
                this.value = value;
                //调用回调函数更新界面
                this.cb.call(this.vm, value, oldVal);
            }
        },
        addDep: function(dep) {
            //判断dep与watcher关系是否已经建立
            if(!this.depIds.hasOwnProperty(dep.id)) {
                //将watcher添加到dep中  用于更新
                dep.addSub(this);
                //将dep添加到watcher中  用于防止重复建立关系
                this.depIds[dep.id] = dep;
            }
        },
        //得到表达式的值,建立dep与watcher的关系
        get: function(){
            //给dep指定当前的watcher
            Dep.target = this;
            //获取表达式的值,内部调用get建立dep与watcher的关系
            var value = this.getVMVal();
            //去除dep中指定的当前的watcher
            Dep.target = null;
            return value;
        },
        //得到表达式对应的值
        getVMVal: function(){
            var exp = this.exp.split('.');
            var val = this.vm._data;
            exp.forEach(function(k) {
                val = val[k]
            });
            return val;
        }
    
    }

ps: 通过谷歌的debbuger断点测试,把流程多跑几次,就有一个大概的思路了.现在看还是有点晕,不过有注释,

等过段时间回来再熟悉几遍!

[70]: /images/20210726/fbe0520d2af24d909f6b6053d083870e.png