MVVM原理及实现——VUE

liuliu

MVVM框架

在讲MVVM框架的时候,就绕不开MVC框架

MVC框架

将整个前端页面分成View,Controller,Modal,视图上发生变化,通过Controller(控件)将响应传入到Model(数据源),由数据源改变View上面的数据。
clipboard.png
但是由于MVC框架允许view和model直接俄通信,所以随着业务量的扩大,可能会出现很难处理的依赖关系,完全背离了开发所应该遵循的“开放封闭原则”。

MVVM详解

面对这个问题,MVVM框架就出现了,它与MVC框架的主要区别有两点:
1、实现数据与视图的分离
2、通过数据来驱动视图,开发者只需要关心数据变化,DOM操作被封装了。
MVVM
数据就是简单的javascript对象,需要将数据绑定到模板上。监听视图的变化,视图变化后通知数据更新,数据更新会再次导致视图的变化!

VUE双向绑定原理

clipboard.png

Vue的双向绑定主要通过compile(编译模板)、数据劫持、发布者-订阅者模式模式来实现的。初始化数据时通过Object.defineProperty来劫持各个属性的getter和setter。在编译模板时,把依赖数据的元素创建观察者,在get属性的时候,将watcher实例放入订阅列表中,在set数据的时候,notify所有的订阅者,触发订阅者的update方法来更新数据。达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

Object.defineProperty

Object.defineProperty可以又两种方式在对象上直接定义一个属性,或者修改一个已经存在的属性的值。

方法1:属性描述符

let obj = {};
    Object.defineProperty(obj, 'test', {
        // 可配置
        configurable: true,
        // 可写
        writable: true,
        value: 'liuliu',
        // 是否可遍历
        enumerable: true
    })
    

运行结果:
clipboard.png
可以通过definePorperty方法给对象添加一个test属性,此属性configurable时,此属性可删除;writeable时,可以重新给此属性赋值。enumable时,此时行可以被Object.keys()等方法遍历。

方法2:存取描述符

let obj = {};
let val = null;
Object.defineProperty(obj, 'test', {
    get() {
        console.log('get value')
        return val;
    },  
    set(value) {
        console.log('set value')
        val = value;
    }
})

clipboard.png
由一对 getter、setter 函数功能来描述的属性。

注意:两种方法不可同时使用

vue数据劫持

index.html

<body>
</body>
<script src="./mvvm.js"></script>
<script>
    let vue =  new Vue({
        el: '#app',
        data: {
            a: {b: 1},
            c: 2
        }
    })

</script>

mvvm.js

function Vue(options) {
    this.$options = options;
    let data = this._data = this.$options.data;
    observe(data);
}

//观察对象 给对象添加defineProperty
function observer(data) {
    for (let key in data) {
        let val = data[key];
        // 如果val不是基本数据类型,则需要继续劫持
        if (val != null && typeof val === "object") {
            observer(val);
        }
        Object.defineProperty(data, key, {
            enumerable: true,
            get() {
                console.log('get data')
                // 返回data[key]的值。
                return val;
            },
            set(newval) {
               console.log('set data');
                // 如果数据发生变化
                if (newval === val) {
                    return;
                }
                //将新值赋予val
                val = newval;
                // 新值如果不是基本数据类型,则需要继续
                if (val != null && typeof val === "object") {
                    observer(val);
                }
            }
        })
    }
}

测试结果
clipboard.png

在初始化数据的时候,我们通过observe函数来观察初始数据,设置数据的getter和setter来劫持数据。我们在获取a的值的时候,会执行其get方法,打印数据并返回a的值,在给属性赋值的时候执行set方法,如此这样我们就可以在get和set数据的时候做一些其它的操作。

数据代理

mvvm.js

function Vue(options) {
    this.$options = options;
    let data = this._data = this.$options.data;
    observe(data);

    // this 代理this._data
    Object.keys(data).forEach(key =>{
        Object.defineProperty(this, key, {
            enumerable: true,
            get() {
                return this._data[key];
            },
            set(value) {
                this._data[key] = value;
            }
        })
    })
}

运行结果

clipboard.png
Vue在访问data数据的时候是使用this.a的方式而不是this._data.a,所以遍历data的属性,将其通过defineProperty的方法代理到Vue上面。在获取vue.a值的时候,get中返回vue._data.a的值,这时候会触发observe中对a属性get的劫持,返回this._data.a的值。在给vue.a进行赋值时,由于get的是vue._data.a的数值,则需要将新值set给vue._data.a。
通过数据代理,我们将vue._data中的数据代理到vue中。

编译模板

index.html

<body>
   <div id="app">
    <p>b的值为:{{a.b}}</p>
    <p>c的值为:{{c}}</p>
   </div>
</body>
<script src="./mvvm.js"></script>
<script>
    let vue =  new Vue({
        el: '#app',
        data: {
            a: {b: 1},
            c: 2
        }
    })

</script>

mvvm.js

function Vue(options) {
    ...
    //和上文保持一致

    // 编译模板
    new Compile(options.el, this);
}

function Compile(el, vm) {
    // 获取vue实例的根元素
    vm.$el = document.querySelector(el);
    let fragment = document.createDocumentFragment();
    // 将dom节点移动到内存中
    while(child = vm.$el.firstChild) {
        fragment.appendChild(child);
    }
    function replace(fragment) {
        // fragement是一个类似数组结构
        Array.from(fragment.childNodes).forEach(node =>{
            // 获取节点的文本内容
            let content = node.textContent;
            // {{}}的正则
            let reg = /\{\{(.*)\}\}/;
            
            //如果node是文本节点且有需要编译的{{}}
            if(node.nodeType === 3 && reg.test(content)) {
                debugger
                // 获取匹配正则表达式中的第一个匹配 (a.b) 并将其分割成字符数组[a,b]
                let arr = RegExp.$1.split('.');
                var val = vm;
                // 获取vue.a.b的值
                arr.forEach(key =>{
                    // 会劫持vue._data中的get方法来获取返回的数据
                    val = val[key];
                })
                // 把获取的数据替换掉模板
                node.textContent = content.replace(/\{\{(.*)\}\}/, val);
            }
            // 如果当前结点还有子节点 则递归编译
            if(node.childNodes) {
                replace(node);
            }
        })
    }
    //编译vue实例的根节点
    replace(fragment);
    // 将在内存中的节点重新入到dom中
    vm.$el.appendChild(fragment);
}

运行结果:

clipboard.png
劫持并代理数据之后,我们开始编译文档中存在的模板。获取根节点app的文档元素,并将其移入到内存中,递归循环判断节点文本中的{{}},并将其替换为data中对应的数据。最后将替换完成的文档片段插入到dom中,从而完成编译。

观察者

mvvm.js

function Compile(el, vm) {
    // 获取vue实例的根元素
    vm.$el = document.querySelector(el);
    let fragment = document.createDocumentFragment();
    // 将dom节点移动到内存中
    while(child = vm.$el.firstChild) {
        fragment.appendChild(child);
    }
    function replace(fragment) {
        // fragement是一个类似数组结构
        Array.from(fragment.childNodes).forEach(node =>{
            // 获取节点的文本内容
            let content = node.textContent;
            // {{}}的正则
            let reg = /\{\{(.*)\}\}/;
            
            //如果node是文本节点且有需要编译的{{}}
            if(node.nodeType === 3 && reg.test(content)) {
                debugger
                // 获取匹配正则表达式中的第一个匹配 (a.b) 并将其分割成字符数组[a,b]
                let arr = RegExp.$1.split('.');
                var val = vm;
                // 获取vue.a.b的值
                arr.forEach(key =>{
                    // 会劫持vue._data中的get方法来获取返回的数据
                    val = val[key];
                })
                // 添加watcher 当data中依赖的数据改变时,通过watcher的update方法更新到页面中去
                new Watcher(vm, RegExp.$1, function(newVal){
                    node.textContent = content.replace(/\{\{(.*)\}\}/, newVal);
                })
                // 把获取的数据替换掉模板
                node.textContent = content.replace(/\{\{(.*)\}\}/, val);
            }
            // 如果当前结点还有子节点 则递归编译
            if(node.childNodes) {
                replace(node);
            }
        })
    }
    //编译vue实例的根节点
    replace(fragment);
    // 将在内存中的节点重新入到dom中
    vm.$el.appendChild(fragment);
}

// 观察者
function Watcher(vm, exp, fn) {
    // 当前对象
    this.vm = vm;
    // 正则
    this.exp = exp;
    //回掉函数
    this.fn = fn;
    // 获取引用对应的值
    let arr = this.exp.split('.');
    let val = vm;
    arr.forEach(key => {
        val = val[key];
    })
}
Watcher.prototype.update = function() {
    // 获取data中的值
    let val = this.vm;
    let arr = this.exp.split('.');
    arr.forEach(key =>{
        val = val[key];
    })
    // 执行watcher的update方法,使更新的值渲染到文档中
    this.fn(val);
}

观察者需要在依赖的数据该生改变时,执行wathcer的update方法,将新的数据渲染到文档中去。所以我们要给需要编译替换的元素添加Watcher实例,并将当前元素的data和表达式传入。更新值的时候可以根据这两个参数获取到最新的数据。

发布订阅

function Sub()

//发布订阅
function Dep() {
    // subs中存储订阅实例
    this.subs = [];
}
// 添加订阅,给依赖当前数据的实例的watcher添加到订阅列表中
Dep.prototype.addSub = function(sub) {
    this.subs.push(sub);
}
// 发布信息函数
Dep.prototype.notify = function() {
    // 依次执行订阅者的update方法使得订阅者也更新
    this.subs.forEach(item => {
        item.update();
    })
}

function Watcher()

// 观察者
function Watcher(vm, exp, fn) {
    // 当前对象
    this.vm = vm;
    // 正则
    this.exp = exp;
    //回掉函数
    this.fn = fn;
    //将当前实例绑定到Dep构造的属性上
    Dep.target = this;
    // 获取引用对应的值
    let arr = this.exp.split('.');
    let val = vm;
    arr.forEach(key => {
        // 获取data数据的时候 因为target不为空,所以会将当前实例放入val的订阅列表中
        val = val[key];
    })
    // 循环完依赖 将target置空,以免将当前实例添加在非依赖的订阅列表中
    Dep.target = null;
}

function observe()

//观察对象 给对象添加defineProperty
function observe(data) {
    for(let key in data) {
        let val = data[key];
        let dep = new Dep();
        //如果data的属性值还是对象,则递归做劫持
        if (data !== null &&typeof val=== 'object') {
          observe(val);
        }
        // 使用defineProperty的方式定义属性
        Object.defineProperty(data, key, {
            enumerable: true,
            get() {
                // 当target不为空时,则当前data为target的依赖, 所以将其添加到订阅列表中
                if (Dep.target) {
                    dep.addSub(Dep.target);
                }
                return val;
            },
            set(newVal) {
                // 如果旧值不等于新值 则赋值
                if(val === newVal) {
                    return ;
                }
                // 在get数据的时候可以将新值返回
                val = newVal;
                // 如果新值为一个对象,则需要继续对属性做劫持
                if(val !== null && typeof val === 'object') {
                    observe(val);
                }
                // 数据发生变化时,通知订阅者更新
                dep.notify();
            }
        })
    }

}

运行结果:
dep
当获取编译模板时,生成Watcher实例,在观察者的构造方法中循环获取依赖数据的value,此时observe会get劫持,将当前观察实例放入订阅列表中。若模板依赖的数据发生改变,observe劫持set,将新值复制给当前属性,并通知subs中所有的依赖,使其执行update方法来进行更新。

双向绑定

index.html

<body>
   <div id="app">
    <p>b的值为:{{a.b}}</p>
    <p>c的值为:{{c}}</p>
    <input type="text" v-model="a.b">
   </div>
</body>

function Compile()

function Compile(el, vm) {
    // 获取vue实例的根元素
    vm.$el = document.querySelector(el);
    let fragment = document.createDocumentFragment();
    // 将dom节点移动到内存中
    while(child = vm.$el.firstChild) {
        fragment.appendChild(child);
    }
    function replace(fragment) {
        // fragement是一个类似数组结构
        Array.from(fragment.childNodes).forEach(node =>{
            // 获取节点的文本内容
            let content = node.textContent;
            // {{}}的正则
            let reg = /\{\{(.*)\}\}/;
            
            //如果node是文本节点且有需要编译的{{}}
            if(node.nodeType === 3 && reg.test(content)) {
                // 获取匹配正则表达式中的第一个匹配 (a.b) 并将其分割成字符数组[a,b]
                let arr = RegExp.$1.split('.');
                var val = vm;
                // 获取vue.a.b的值
                arr.forEach(key =>{
                    // 会劫持vue._data中的get方法来获取返回的数据
                    val = val[key];
                })
                // 添加watcher 当data中依赖的数据改变时,通过watcher的update方法更新到页面中去
                new Watcher(vm, RegExp.$1, function(newVal){
                    node.textContent = content.replace(/\{\{(.*)\}\}/, newVal);
                })
                // 把获取的数据替换掉模板
                node.textContent = content.replace(/\{\{(.*)\}\}/, val);
            }

            //如果是元素节点
            if(node.nodeType === 1) {
                // 获取元素的所有属性
                let attrs = node.attributes;
                Array.from(attrs).forEach(attr =>{
                      //attr = 'v-model= "b" '
                      let name = attr.name; //name = v-model
                      let exp = attr.value  //exp = b;
                    // 如果属性以v-开头
                    if (name.indexOf('v-') === 0) {
                        let val = vm;
                        exp.split('.').forEach(key =>{
                            val = val[key];
                        })
                        node.value = val;
                        // 订阅数据更新事件
                        new Watcher(vm, exp, function (newVal) {
                            node.value = newVal;
                        })
                        // 输入框变化时, 将值赋予到vm上
                        node.addEventListener('input', function (e) {
                            let newVal = e.target.value; //获取新值
                            // 触发observe的set
                            expr = exp.split('.');
                            expr.reduce((prev, next, index) => {
                                if(index === expr.length -1) {
                                    prev[next] = newVal;
                                } else {
                                    return prev[next];
                                }
                            }, vm)
                        })
                    }
                })
            }
            // 如果当前结点还有子节点 则递归编译
            if(node.childNodes) {
                replace(node);
            }
        })
    }
    //编译vue实例的根节点
    replace(fragment);
    // 将在内存中的节点重新入到dom中
    vm.$el.appendChild(fragment);
}

运行结果:
v-model
监听输入框的input事件,将新值复制给data, set会通知订阅者进行更新。直接改变data数据,劫持数据set的时候会通知依赖update,从而实现了数据的双向绑定。

计算属性

index.html

<body>
   <div id="app">
    <p>b的值为:{{a.b}}</p>
    <p>c的值为:{{c}}</p>
    <input type="text" v-model="a.b">
    {{hello}}
   </div>
</body>
<script src="./mvvm.js"></script>
<script>
    let vue =  new Vue({
        el: '#app',
        data: {
            a: {b: 1},
            c: 'sdsd'
        },
        computed: {
            hello() {
                return this.a.b + this.c;
            }
        }
    })

</script>

mvvm.js

function Vue(options) {
    this.$options = options;
    let data = this._data = this.$options.data;
    // 观察数据data
    observe(data);

    // this 代理this._data
    Object.keys(data).forEach(key =>{
        Object.defineProperty(this, key, {
            enumerable: true,
            get() {
                return this._data[key];
            },
            set(value) {
                this._data[key] = value;
            }
        })
    })
    initComputed.call(this);
    // 编译模板
    new Compile(options.el, this);
}

// 初始化计算属性
function initComputed() {
    debugger
    let vm = this;
    let computed = this.$options.computed;
    for(k in computed) {
        Object.defineProperty(vm, k, {
            enumerable: true,
            //  判断计算属性是个函数还是一个对象 hello() {} or hello: {get(){}, set() {}}
            get: typeof computed[k] === 'function' ? computed[k] : computed[k].get,
            set() {

            } 
        })
  

运行结果:
computed
盼盼计算属性是一个函数还是有get和set的对象。执行其方法,获取data的数据并返回。由于data中的数据都是在缓存中的,所有computed属性具有缓存依赖性。

阅读 1.9k

前端道路摸索
前端入门知识学习与归档。。。一起开始开始前端的新坑吧
94 声望
9 粉丝
0 条评论
94 声望
9 粉丝
文章目录
宣传栏