浅析MVVM原理，实现一个mini-vue

╰+攻爆jí腚メ 2022-09-03 00:28 152阅读 0赞

**目录**

前言

MVVM

mini-vue实现

Compile（指令解析）

Updater（视图更新）

Proxy（代理data）

Observer（数据劫持）

Dep（调度中心）

Watcher（数据观察）

函数的连接

写在最后

--------------------

## **前言** ##

**MVVM实际上是MVC的改进版，其立足于MVP框架。使用Vue时，我们会体会到其与React的区别，绑定表单数据时react对输入框读写需要input事件设置state，以及value绑定，而vue则只需将数据与model绑定即可，这种数据驱动视图却与视图解耦的编程方式使用起来很方便。以前面试官问vue原理，若能说出双向绑定实现和Object.defineProperty就已经够了，现在随着对vue深入的学习，面试官已经不仅仅局限于此。所以，为了深入体验mvvm模式，我实现了一个mini-vue。**

## **MVVM** ##

**在开始前，我们先试着参照下图实现一个简单的双向绑定案例**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70][]

**DOM通过eventListener修改Model，Model通过修改data驱动视图**

![20210806144123455.gif][]

** 在html>body中添加以下代码就可以实现**

<input id="input-box" type="text">
        <div id="show-text"></div>
        <script>
            const showText = document.querySelector('#show-text')
            const inputBox = document.querySelector('#input-box')
            class VM {
                data = {
                    value: ''
                }
                constructor() {
                    Object.defineProperty(this.data, 'value', {
                        set(v) {
                            showText.textContent = v
                        },
                        get() {
                            return showText.textContent
                        }
                    })
                }
            }
    
            const vm = new VM()
            inputBox.addEventListener('input', function (e) {
                vm.data.value = e.target.value
                console.log(vm.data.value)
            })
        </script>

**在上述代码中，我们可以使用Object.defineProperty将data和textContent的值绑定，从而达到数据驱动视图的效果，那么这样就够了吗？**

## mini-vue实现 ##

**下面是双向绑定的流程  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 1][]**  
**通过上图我们可以得知：new MVVM后会进行两步操作，一是compile指令解析，将v-if,@click,\{ \{  \}\}解析出来，获取data中的数据，并且都与watcher绑定，第一次初始化和watcher监听到数据变化时会执行updater，重新渲染页面，二是observer数据劫持，将data中的数据通过defineProperty添加读写监听，并将数据变化与watcher绑定在一起，那么此时watcher就是连接数据变化和视图更新的枢纽。**

**下面我们一步一步实现上述代码**

### **Compile（**指令解析**）** ###

**我们回顾一下vue是如何使用的，标签中各种v-if，v-show，v-html，以及@click等等属性，绑定着data中的属性和methods中的函数**

<div id="app">
            <span v-text='title.name'></span>
            <div v-if='isRender'>
                <span>1</span>
                <span>2</span>
                <span>3</span>
            </div>
            <ul>
                <li v-if='isRender'>{
       {info.name}}---{
       {info.age}}---{
       {modelData}}---{
       {inputVal.item.value}}</li>
                <li v-show='isShow'>{
       {info.age}}</li>
                <li v-if='isRender'>{
       {modelData}}</li>
                <li v-show='isShow'>{
       {inputVal.item.value}}</li>
            </ul>
            <span v-text='inputVal.item.value'></span>
            <div v-html='htmlTemp'></div>
            <div v-show='isShow'>world</div>
            <button v-on:click='handlerShow'>点击显示</button>
            <button @click='handlerRender'>点击渲染</button>
            <input v-model='modelData' type="text">
            <input v-model='inputVal.item.value' type="text">
        </div>

**而实例化vue则是将数据和函数初始化到vue中**

let vm = new Vue({
                el: '#app',
                data: {
                    title: {
                        name: 'hello'
                    },
                    info: {
                        name: '张三',
                        age: 23,
                    },
                    isShow: true,
                    isRender: true,
                    modelData: 123,
                    htmlTemp: '<span style="color:red;">html</span>',
                    inputVal: {
                        item: {
                            value: 'abc'
                        }
                    }
                },
                methods: {
                    handlerShow() {
                        this.isShow = !this.isShow
                    },
                    handlerRender() {
                        this.isRender = !this.isRender
                    }
                },
            })

**那么，我们要如何去让js识别这些指令并渲染视图呢  
首先，创建标签碎片，将Dom元素获取到DocumentFragment中，以便于解析指令及根据指令对视图响应，其次，将标签属性分离，每种指令对应一种响应方式（updater）。最后绑定watcher监听到数据变化时，再次触发updater  
以下是compile.js，用来解析标签内容和属性**

// 指令解析器
    const textRegex = /\{\{(.+?)\}\}/g //解析{
       {}}的正则
    class Compile {
        constructor(elem, vm) {
            this.elem = isElemNode(elem) === '1' ? elem : document.querySelector(elem)
            this.vm = vm
            const fragment = this.createFragment(this.elem)
            this.getTemp(fragment, this.vm)
            this.elem.appendChild(fragment);
        }
        // 递归子元素，查找所有元素
        getTemp(fragment, vm) {
            const fragmentChild = Array.from(fragment.childNodes)
            fragmentChild.forEach(item => {
                this.filterElem(item, vm)
                item.childNodes && item.childNodes.length && this.getTemp(item, vm)
            })
        }
        // 创建标签碎片，将dom元素添加到标签碎片中
        createFragment(elem) {
            const fragment = document.createDocumentFragment();
            while (elem.firstChild) {
                fragment.append(elem.firstChild)
            }
            return fragment
        }
    
        // 针对不同元素节点进行分离
        filterElem(elem, vm) {
            switch (isElemNode(elem)) {
                case 1: //元素节点
                    this.renderNode(elem, vm)
                    break;
                case 3: //文本节点
                    this.renderText(elem, vm)
                    break;
            }
        }
        // 渲染文本，主要解析‘{
       {}}’及多个‘{
       {}}’
        renderText(elem, vm) {
            textRegex.test(elem.textContent) && updater(elem, vm, elem.textContent, 'text-content')
        }
        // 渲染标签
        renderNode(elem, vm) {
            //取出所有属性和值
            Array.from(elem.attributes).forEach(attr => {
                const {
                    name,
                    value
                } = attr;
                // 过滤‘v-’和‘@’操作，并移除标签属性
                name.startsWith('v-') ? (this.compileV_Command(elem, vm, name, value), removeAttr(elem, name)) : name.startsWith('@') ? (this.compileEventComment(elem, vm, name.split('@')[1], value), removeAttr(elem, name)) : null
            })
        }
        // v- 指令解析,指令
        compileV_Command(elem, vm, name, value) {
            const key = name.split('v-')
            const eventCommand = key[1] && key[1].split(':')[1]
            // v-model事件
            key[1] === 'model' && this.compileEventComment(elem, vm, 'input', value, e => {
                setDeepData(vm, value, e.target.value)
            })
            // 过滤指令是否为事件
            eventCommand ? this.compileEventComment(elem, vm, eventCommand, value) : updater(elem, vm, value, key[1])
        }
        // @ 指令解析,事件
        compileEventComment(elem, vm, name, value, fn) {
            !fn && elem.addEventListener(name, vm.options.methods[value].bind(vm))
            fn && elem.addEventListener(name, fn.bind(vm))
        }
    }

### Updater（视图更新） ###

**指令解析完后自然需要updater.js，对当前元素进行下一步渲染，在此之前，我们的值需要从vue.data中取，这样才能将data数据绑定到标签中，lodash有两个函数一个是\_.get()，另一个是\_.set()，作用是获取和设置对象某一层某个值，所以我们需要在utils（工具函数）中实现一下**

**utils.js**

//lodash中的 _.get()，获取对象多级属性
    function getDeepData(object, path, defaultValue) {
        const paths = path.split('.')
        for (const i of paths) { //逐层遍历path
            object = object[i]
            if (object === undefined) { //不能用 '!object' null，0，false等等会等于false
                return defaultValue
            }
        }
        return object
    }
    //lodash中的 _.set()，赋值对象某级属性
    function setDeepData(object, path, value) {
        const paths = path.split('.')
        const last = paths[paths.length - 1]//为何要在length - 1时赋值：因为object的引用关系使得我们可以一级一级赋值，而当最后一项是基本类型时，无法将引用的值赋给原始的object
        let _obj = object
        for (const i of paths) {
            last === i && (_obj[last] = value)
            _obj = _obj[i]
        }
    }
    // 移除属性值
    function removeAttr(elem, key) {
        elem.removeAttribute(key)
    }
    // 获取标签类型
    function isElemNode(elem) {
        return elem.nodeType
    }

**updater.js **

// 更新视图,标签中指令属性处理
    function updater(elem, vm, value, type) {
        switch (type) {
            case 'text':
                    elem.textContent = getDeepData(vm.data, value)
                break;
            case 'text-content':
                    elem.textContent = value.replace(textRegex, (..._) => getDeepData(vm.data, _[1]))
                break;
            case 'html':
                    elem.innerHTML = getDeepData(vm.data, value)
                break;
            case 'model':
                    elem.value = getDeepData(vm.data, value)
                break;
            case 'if':
                const temp = document.createTextNode('')
                elem.parentNode.insertBefore(temp, elem);
                    getDeepData(vm.data, value) ? temp.parentNode.insertBefore(elem, temp) : temp.parentNode.removeChild(elem)
                break;
            case 'show':
                    elem.hidden = !getDeepData(vm.data, value)
                break;
        }
    }

**完成这一步后，我们在vue.js中调用**

class VueDemo {
        constructor(options) {
            this.options = options //配置信息
            this.data = options.data;
            // 判断options.el是否存在
            (this.el = options.el) && Object.defineProperties(this, {
                compile: {
                    value: new Compile(options.el, this) //指令解析器
                }
            })
        }
    }

**效果出来了，指令被解析出来并且在页面中显示**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 2][]

### **Proxy（代理data）** ###

**我们虽然将vue.data中的数据渲染到了页面，但是还是需要通过this.data来获取数据，而vue可以中直接通过this来拿到数据，此时我们需要新建一个proxy.js将this.data代理到this上**

// data数据代理到vue
    class DataProxy {
        constructor(data, vm) {
            for (const key in data) {
                Object.defineProperty(vm, key, {
                    get() {
                        return data[key];
                    },
                    set(val) {
                        data[key] = val;
                    }
                })
            }
            return data
        }
    }

**在vue.js中调用，并将updater.js 中的vm.data改成vm**

class VueDemo {
        constructor(options) {
            this.options = options //配置信息
            this.$data = options.data;
            // 判断options.el是否存在
            (this.el = options.el) && Object.defineProperties(this, {
                proxy: {
                    value: new DataProxy(options.data, this) //data代理到this
                },
                compile: {
                    value: new Compile(options.el, this) //指令解析器
                }
            })
        }
    }

**写到这里，compile和updater已经实现了，接下来将是数据劫持的实现方式**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 3][]

### Observer（数据劫持） ###

**这一步的作用是将data中的数据都加上读写响应控制，给所有数据绑定可以更新视图的函数**

// 发布模式
    class Observer {
        constructor(data) {
            this.initObserver(data)
        }
        // 劫持所有数据
        initObserver(data) {
            if (data && typeof data === 'object') {
                for (const key in data) {
                    this.defineReactive(data, key, data[key])
                }
            }
        }
        // 响应拦截器，递归监听所有层级
        defineReactive(data, key, val) {
            this.initObserver(val) //劫持子项
            Object.defineProperty(data, key, {
                enumerable: true, // 允许枚举
                configurable: false, // 不能被定义
                get: _ =>  val,//初始化获取值时对dep绑定
                set: newVal => val = newVal
            })
        }
    }

### Dep（调度中心） ###

**watcher的作用是将上面的observer与视图的刷新函数updater进行连接，当observer监测到数据变化时会通过dep告诉watcher，watcher就会执行updater更新视图，于是，我们需要先实现observer与watcher之间的观察者dep，我们先假定watcher中更新视图的函数名字叫compareVal，将watcher注册到调度中心中**

// 调度中心（观察者模式）
    class Dep {
        observerList = [] //调度中心,存放与属性绑定的事件
        //触发所有与该属性绑定的事件
        fireEvent() {
            this.observerList.forEach(target => {
                target.compareVal()
            })
        }
        //注册事件
        subscribe(target) {
            target.compareVal && this.observerList.push(target)
        }
    }

### **Watcher（数据观察）** ###

**watcher的作用是连接observer和compile，使数据和视图绑定  
以下是watcher.js的实现**

// 订阅模式(比较绑定值的变化)
    class Watcher {
        constructor(vm, val, update) {
            this.vm = vm
            this.val = val;
            this.update = update
            this.oldVal = getDeepData(this.vm, this.val)
            update() //首次渲染初始化
        }
        // 对比数据，更新视图
        compareVal() {
            const newVal = getDeepData(this.vm, this.val);
            newVal !== this.oldVal && (this.update(), this.oldVal = newVal) //更新视图后将新值赋到oldVal上
        }
    }

### **函数的连接** ###

**我们来回顾一下以上功能的实现**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 4][]

**整个流程中的函数部分已经全部实现，只剩下如何将他们联系在一起，这时如果你对整个功能实现还有些模糊，那请认真分析一下这张流程图，并继续看下去吧**

**首先我们把watcher和指令解析以及updater之间的关系实现。  
在updater中给予每一个指令一个watcher，将更新视图操作绑定到watcher中，由compareVal来更新视图**

// 更新视图,标签中指令属性处理
    function updater(elem, vm, value, type) {
        switch (type) {
            case 'text':
                new Watcher(vm, value, _ => {
                    elem.textContent = getDeepData(vm, value)
                })
                break;
            case 'text-content':
                value.replace(textRegex, (..._) => { //外面的content.replace获取所有{
       {}}中的属性
                    new Watcher(vm, _[1], _ => { //里面的content.replace获取data中绑定的值
                        elem.textContent = value.replace(textRegex, (..._) => getDeepData(vm, _[1]))
                    })
                })
                break;
            case 'html':
                new Watcher(vm, value, _ => {
                    elem.innerHTML = getDeepData(vm, value)
                })
                break;
            case 'model':
                new Watcher(vm, value, _ => {
                    elem.value = getDeepData(vm, value)
                })
                break;
            case 'if':
                const temp = document.createTextNode('')
                elem.parentNode.insertBefore(temp, elem);
                new Watcher(vm, value, _ => {
                    getDeepData(vm, value) ? temp.parentNode.insertBefore(elem, temp) : temp.parentNode.removeChild(elem)
                })
                break;
            case 'show':
                new Watcher(vm, value, _ => {
                    elem.hidden = !getDeepData(vm, value)
                })
                break;
        }
    }

**那么如何告诉watcher数据发生了改变呢？  
在watcher中我们获取oldvalue时采用this.oldVal = getDeepData(this.vm, this.val)  
这个操作会使observer中data属性的get被触发，此时如果我们将watcher注册到dep中即可对所有数据变化进行监听，然鹅，在实现的时候，发现了一些问题，由于defineReactive将data所有属性都监听了，导致取属性时使用\{ \{info.name\}\}时，data.info和data.info.name都会被劫持，而我们只需要info.name，所以，当dep注册watcher时需要设置一个开关，并且在observer中根据开关添加监听，修改的watcher和observer如下：  
watcher.js**

// 订阅模式(比较绑定值的变化)
    class Watcher {
        constructor(vm, val, update) {
            this.vm = vm
            this.val = val;
            this.update = update
            this.oldVal = this.getOldVal() //获取初始值，触发observer中属性的get
            update() //首次渲染初始化
        }
        getOldVal() {
            Dep.target = this //将watcher暂存到Dep上，在Observer中通过dep.subscribe将watcher传到dep的observerList（调度中心）中，后续当值发送修改时通过fireEvent触发watcher.compareVal来更新视图
            const oldVal = getDeepData(this.vm, this.val) //触发Observer中的getter，将watcher注册到dep中
            Dep.target = null
            return oldVal
        }
        // 对比数据，更新视图
        compareVal() {
            const newVal = getDeepData(this.vm, this.val);
            newVal !== this.oldVal && (this.update(), this.oldVal = newVal) //更新视图后将新值赋到oldVal上
        }
    
    }

**observer.js中的defineReactive**

// 响应拦截器，递归监听所有层级
        defineReactive(data, key, val) {
            this.initObserver(val) //劫持子项
            const dep = new Dep() //将observer与watcher连接，当watcher触发数据变化后，将watcher中的回调函数注册到dep中
            Object.defineProperty(data, key, {
                enumerable: true, // 允许枚举
                configurable: false, // 不能被定义
                get: _ => {
                    Dep.target && dep.subscribe(Dep.target); //获取属性值时,将watcher中的回调函数注册到dep中（在页面初始化时调用）
                    return val
                },
                set: newVal => newVal !== val && (val = newVal) //设置属性时，对比新值和旧值有无差别
            })
        }

**现在，我们只剩下当数据发生改变时，如何通知watcher，因为上述的defineReactive中已经将watcher注册到了dep，此时我们只需在数据变化时也就是defineReactive的set中对数据更新进行响应，当某条数据被设置时，我们将dep中watcher触发即可**

// 响应拦截器，递归监听所有层级
        defineReactive(data, key, val) {
            this.initObserver(val) //劫持子项
            const dep = new Dep() //将observer与watcher连接，当watcher触发数据变化后，将watcher中的回调函数注册到dep中
            Object.defineProperty(data, key, {
                enumerable: true, // 允许枚举
                configurable: false, // 不能被定义
                get: _ => {
                    Dep.target && dep.subscribe(Dep.target); //获取属性值时,将watcher中的回调函数注册到dep中（在页面初始化时调用）
                    return val
                },
                set: newVal => newVal !== val && (val = newVal, this.initObserver(newVal), dep.fireEvent()) //设置属性时，对比新值和旧值有无差别，若修改的值是引用型时，将属性重新注册到dep中,并更新视图
            })
        }

**至此，流程图中的所有功能均已实现，让我们在vue.js中实例化observer试试效果**

class VueDemo {
        constructor(options) {
            this.options = options //配置信息
            this.$data = options.data;
            // 判断options.el是否存在
            (this.el = options.el) && Object.defineProperties(this, {
                //observer和compile的顺序不要错，否则监听不到compile中的数据
                observer: {
                    value: new Observer(options.data) // 数据监听器
                },
                proxy: {
                    value: new DataProxy(options.data, this) //data代理到this
                },
                compile: {
                    value: new Compile(options.el, this) //指令解析器
                }
            })
        }
    }

![20210808225030888.gif][]

## 写在最后 ##

**感谢你看到了最后，希望文章能对你有帮助，同时也欢迎你提出宝贵的建议**

**最后附上[源码地址][Link 1]  
喜欢这篇文章别忘了点个赞，你的支持是作者创作的动力**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70]: /images/20220829/c94eed5c0498400cb16ad11df19571a5.png
[20210806144123455.gif]: /images/20220829/970602826ca14ea2bcc8ce692722ed0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 1]: /images/20220829/dbbfb1f3fcfb43fc90ae34d98ec1bab0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 2]: /images/20220829/06e1e80613be4cbe87ac2e10def03b84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 3]: /images/20220829/23da02203316468fabe0df2dddf16ae3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 4]: /images/20220829/66daffc64ac84971acc916312e62c3f0.png
[20210808225030888.gif]: /images/20220829/2650dbbaaeeb457a99579bf3d6b023c6.png
[Link 1]: https://gitee.com/DieHunter/myCode/tree/master/Vue%E5%8E%9F%E7%90%86