浅析Vue响应系统原理与搭建Vue2.x迷你版-vue2响应式原理

Vue2.x响应式原理怎么实现的?

Vue 最独特的特性之一，是其非侵入性的响应式系统。那么什么是响应式原理?

数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率。简言之，在改变数据的时候，视图会跟着更新。

了解概念之后，那么它是怎么实现的呢?

其实是利用Object.defineProperty()中的getter 和setter方法和设计模式中的观察者模式。

那么，我们先来看下Object.defineProperty()。MDN中它是这样解释它的：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

let data = { 
 msg:'hello' 
}; 
 
let vm = {}; 
 
Object.defineProperty(vm, 'msg', { 
        enumerable: true, // 可枚举（可遍历） 
        configurable: true, // 可配置（可以使用delete 删除，可以通过defineProperty重新定义） 
 
        // 当获取值的时候执行 
        get() { 
            console.log('get', data.msg); 
            return data.msg 
        }, 
        // 当设置值的时候执行 
        set(newVal) { 
            if (newVal === data.msg) { 
                return 
            } 
            data.msg = newVal; 
            console.log('set', data.msg); 
        } 
}) 
 
// 测试 
 
console.log(vm.msg); 
/*  
> "get" "hello" 
> "hello" 
*/ 
vm.msg = 'world'; // > "set" "world"

简单介绍Object.defineProperty()之后，接着就是了解观察者模式，看到它，你可能会想起发布-订阅模式。其实它们的本质是相同的，但是也存在一定的区别。

我们不妨先来看下发布-订阅模式。

发布-订阅者模式里面包含了三个模块，发布者，订阅者和统一调度中心。这里统一调度中心相当于报刊办事大厅。发布者相当与某个杂志负责人，他来中心这注册一个的杂志，而订阅者相当于用户，我在中心订阅了这分杂志。每当发布者发布了一期杂志，办事大厅就会通知订阅者来拿新杂志。发布-订阅者模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。

下面，我们将通过一个实现Vue自定义事件的例子来更进一步了解发布-订阅模式。

function EventEmitter(){ 
    // 初始化统一调度中心 
    this.subs = Object.create(null); // {'click':[fn1,fn2]} 
} 
// 注册事件 
EventEmitter.prototype.$on = function (eventType,handler){ 
        console.log(this); 
        this.subs[eventType]= this.subs[eventType]||[]; 
        this.subs[eventType].push(handler); 
} 
// 触发事件 
EventEmitter.prototype.$emit = function (eventType,data){ 
        if(this.subs[eventType]){ 
                this.subs[eventType].forEach(handler => { 
                    handler(data); 
                }); 
        } 
} 
 
// 测试 
const em = new EventEmitter(); 
 
//订阅者 
em.$on('click1',(data)=>{ 
    console.log(data); 
}) 
// 发布者 
em.$emit('click1','maomin') //maomin

这种自定义事件广泛应用于Vue同级组件传值。

接下来，我们来介绍观察者模式。

观察者模式是由目标调度，比如当事件触发时，目标就会调用观察者的方法，所以观察者模式的订阅者(观察者)与发布者(目标)之间存在依赖。

// 发布者（目标） 
function Dep(){ 
    this.subs = []; 
} 
Dep.prototype.addSub = function (sub){ 
    if(sub&&sub.update){ 
            this.subs.push(sub); 
    } 
} 
 
Dep.prototype.notify = function (data){ 
        this.subs.forEach(sub=>{ 
            sub.update(data); 
        }) 
} 
// 订阅者（观察者） 
function Watcher(){} 
    Watcher.prototype.update=function(data){ 
    console.log(data); 
} 
 
// 测试 
let dep = new Dep(); 
let watcher = new Watcher(); 
// 收集依赖 
dep.addSub(watcher); 
// 发送通知 
dep.notify('1'); 
dep.notify('2');

下图是区分两种模式。

实现Vue2.x迷你版本

为什么要实现一个Vue迷你版本，目的就是加深对Vue响应式原理以及其中一些API的理解。首先我们先来分析Vue2.x 响应式原理的整体结构。

如下图所示：

我们接下来，将根据这幅图片描述的流程来实现一款迷你版Vue。Vue2.x采用了Virtual DOM，但是因为这里只需要实现一个迷你版，所以我们这里做了简化，我们这里就是直接操作DOM。

下面，我们来看下我是如何搭建一款Vue mini的。

第一步

页面结构如下，我们可以先引入Vue2.x完整版本，看下实现效果。

<!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>Vue2.x Reactive</title> 
</head> 
 
<body> 
    <div id="app"> 
        <h2>文本节点</h2> 
        <div>{{msg}}</div> 
        <div>{{count}}</div> 
        <div>{{obj.name}}</div> 
        <div>{{arr[0]}}</div> 
        <div>{{obj.inner.age}}</div> 
        <div>{{obj.inner.name}}</div> 
        <h2>v-text</h2> 
        <div v-text="msg"></div> 
        <h2>v-model</h2> 
        <input type="text" v-model="msg"> 
        <input type="text" v-model="count"> 
        <h2>v-html</h2> 
        <div v-html="html"></div> 
        <h2>v-show</h2> 
        <div v-show="isShow">{{isShow}}</div> 
        <h2>v-on</h2> 
        <button v-on:click="handler">handler</button> 
        <button @click="onClick">onClick</button> 
        <h2>v-if</h2> 
        <div> 
            <p v-if="isIf">{{isIf}}</p> 
        </div> 
    </div> 
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script> 
    <script> 
        const vm = new Vue({ 
                el: '#app', 
                data() { 
                    return { 
                        msg: 'maomin', 
                        count: 1, 
                        obj: { 
                            name: 'hello', 
                            inner: { 
                                age: 17 
                            } 
                        }, 
                        arr: ['string1'], 
                        html: '<div>{{msg}}</div>', 
                        isShow: false, 
                        isIf:true 
                    } 
                }, 
                methods: { 
                    handler() { 
                        // this.count = 2; 
                        this.isIf = !this.isIf; 
                    }, 
                    onClick() { 
                        this.obj.inner.age = 18; 
                        // console.log(this.obj.inner.age); 
                    } 
                } 
            }); 
    </script> 
</body> 
 
</html>

经过测试，Vue2.x完整版搭载的页面显示如下。我们将使用Vue迷你版本同样实现以下页面效果。

第二步

我们将根据整体结构图和页面结构来搭建这个Vue迷你版本，我们姑且将这个版本叫做vuemini.js。

通过整体结构图我们发现，一共有Vue、Observer、Compiler、Dep、Watcher这几个构造函数。我们首先创建这几个构造函数，这里不使用class类来定义是因为Vue源码大部分也使用构造函数，另外，相对也好拓展。

Vue

// 实例。 
function Vue(options) { 
    this.$options = options || {}; 
    this._data = typeof options.data === 'function' ? options.data() : options.data || {}; 
    this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el; 
    // 负责把data中的属性注入到Vue实例，转换成getter/setter 
    this._proxyData(this._data); 
    this.initMethods(this, options.methods || {}) 
    // 负责调用observer监听data中所有属性的变化 
    new Observer(this._data); 
    // 负责调用compiler解析指令/插值表达式 
    new Compiler(this); 
} 
// 将data中的属性挂载到this上 
Vue.prototype._proxyData = function (data) { 
    Object.keys(data).forEach(key => { 
        Object.defineProperty(this, key, { 
            configurable: true, 
            enumerable: true, 
            get() { 
                return data[key] 
            }, 
            set(newVal) { 
                if (newVal === data[key]) { 
                    return 
                } 
                data[key] = newVal; 
            } 
        }) 
    }) 
} 
 
function noop(a, b, c) { } 
function polyfillBind(fn, ctx) { 
    function boundFn(a) { 
        var l = arguments.length; 
        return l 
            ? l > 1 
                ? fn.apply(ctx, arguments) 
                : fn.call(ctx, a) 
            : fn.call(ctx) 
    } 
 
    boundFn._length = fn.length; 
    return boundFn 
} 
function nativeBind(fn, ctx) { 
    return fn.bind(ctx) 
} 
const bind = Function.prototype.bind 
    ? nativeBind 
    : polyfillBind; 
 
// 初始化methods属性 
Vue.prototype.initMethods = function (vm, methods) { 
    for (var key in methods) { 
        { 
            if (typeof methods[key] !== 'function') { 
                warn( 
                    "Method \"" + key + "\" has type \"" + (typeof methods[key]) + "\" in the component definition. " + 
                    "Did you reference the function correctly?", 
                    vm 
                ); 
            } 
        } 
        vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm); 
    } 
}

Observer

// 数据劫持。 
// 负责把data（_data）选项中的属性转换成响应式数据。 
function Observer(data) { 
    this.walk(data); 
} 
Observer.prototype.walk = function (data) { 
    if (!data || typeof data !== 'object') { 
        return 
    } 
    Object.keys(data).forEach(key => { 
        this.defineReactive(data, key, data[key]); 
    }) 
} 
Observer.prototype.defineReactive = function (obj, key, val) { 
    let that = this; 
    // 负责收集依赖 
    let dep = new Dep(); 
    // 如果val是对象，把val内部的属性转换成响应式数据 
    this.walk(val); 
    Object.defineProperty(obj, key, { 
        enumerable: true, 
        configurable: true, 
        get() { 
            // 收集依赖 
            Dep.target && dep.addSub(Dep.target) 
            return val 
        }, 
        set(newVal) { 
            if (newVal === val) { 
                return 
            } 
            val = newVal; 
            // data内属性重新赋值后，使其转化为响应式数据。 
            that.walk(newVal); 
            // 发送通知 
            dep.notify(); 
        } 
    }) 
}

Compiler

// 编译模板，解析指令/插值表达式 
// 负责页面的首次渲染 
// 当数据变化时重新渲染视图 
function Compiler(vm) { 
    this.el = vm.$el; 
    this.vm = vm; 
    // 立即编译模板 
    this.compile(this.el); 
} 
// 编译模板，处理文本节点和元素节点 
Compiler.prototype.compile = function (el) { 
    let childNodes = el.childNodes; 
    Array.from(childNodes).forEach(node => { 
        // 处理文本节点 
        if (this.isTextNode(node)) { 
            this.compileText(node); 
        } 
        // 处理元素节点  
        else if (this.isElementNode(node)) { 
            this.compileElement(node); 
        } 
        // 判断node节点，是否有子节点，如果有子节点，要递归调用compile方法 
        if (node.childNodes && node.childNodes.length) { 
            this.compile(node); 
        } 
    }) 
} 
// 编译文本节点，处理插值表达式 
Compiler.prototype.compileText = function (node) { 
    // console.dir(node); 
    let reg = /\{\{(.+?)\}\}/; 
    let value = node.textContent; 
    if (reg.test(value)) { 
        let key = RegExp.$1.trim(); 
        if (this.vm.hasOwnProperty(key)) { 
            node.textContent = value.replace(reg, typeof this.vm[key] === 'object' ? JSON.stringify(this.vm[key]) : this.vm[key]); 
            // 创建watcher对象，当数据改变更新视图 
            new Watcher(this.vm, key, (newVal) => { 
                node.textContent = newVal; 
            }) 
        } else { 
            const str = `this.vm.${key}`; 
            node.textContent = value.replace(reg, eval(str)); 
            // 创建watcher对象，当数据改变更新视图 
            new Watcher(this.vm, key, () => { 
                const strw = `this.vm.${key}`; 
                node.textContent = value.replace(reg, eval(strw)); 
            }) 
        } 
 
 
    } 
} 
// 判断节点是否是文本节点 
Compiler.prototype.isTextNode = function (node) { 
    return node.nodeType === 3; 
} 
// 判断节点是否是元素节点 
Compiler.prototype.isElementNode = function (node) { 
    return node.nodeType === 1; 
} 
 
// 编译元素节点，处理指令 
Compiler.prototype.compileElement = function (node) { 
    // console.log(node.attributes); 
 
    // 遍历所有的属性节点 
    Array.from(node.attributes).forEach(attr => { 
        let attrName = attr.name; 
        // console.log(attrName); 
        // 判断是否是指令 
        if (this.isDirective(attrName)) { 
            // 判断：如v-on:click 
            let eventName; 
            if (attrName.indexOf(':') !== -1) { 
                const strArr = attrName.substr(2).split(':'); 
                attrName = strArr[0]; 
                eventName = strArr[1]; 
            } else if (attrName.indexOf('@') !== -1) { 
                eventName = attrName.substr(1); 
                attrName = 'on'; 
            } else { 
                attrName = attrName.substr(2); 
            } 
            let key = attr.value; 
 
            this.update(node, key, attrName, eventName); 
        } 
    }) 
} 
// 判断元素属性是否是指令 
Compiler.prototype.isDirective = function (attrName) { 
    return attrName.startsWith('v-') || attrName.startsWith('@'); 
} 
// 指令辅助函数 
Compiler.prototype.update = function (node, key, attrName, eventName) { 
    let updateFn = this[attrName + 'Updater']; 
    updateFn && updateFn.call(this, node, this.vm[key], key, eventName); 
} 
// 处理v-text指令 
Compiler.prototype.textUpdater = function (node, value, key) { 
    node.textContent = value; 
    new Watcher(this.vm, key, (newVal) => { 
        node.textContent = newVal; 
    }) 
} 
// 处理v-html指令 
Compiler.prototype.htmlUpdater = function (node, value, key) { 
    node.insertAdjacentHTML('beforeend', value); 
    new Watcher(this.vm, key, (newVal) => { 
        node.insertAdjacentHTML('beforeend', newVal); 
    }) 
} 
// 处理v-show指令 
Compiler.prototype.showUpdater = function (node, value, key) { 
    !value ? node.style.display = 'none' : node.style.display = 'block' 
    new Watcher(this.vm, key, (newVal) => { 
        !newVal ? node.style.display = 'none' : node.style.display = 'block'; 
    }) 
} 
// 处理v-if指令 
Compiler.prototype.ifUpdater = function (node, value, key) { 
    const nodew = node; 
    const nodep = node.parentNode; 
    if (!value) { 
        node.parentNode.removeChild(node) 
    } 
    new Watcher(this.vm, key, (newVal) => { 
        console.log(newVal); 
        !newVal ? nodep.removeChild(node) : nodep.appendChild(nodew); 
    }) 
} 
// 处理v-on指令 
Compiler.prototype.onUpdater = function (node, value, key, eventName) { 
    if (eventName) { 
        const handler = this.vm.$options.methods[key].bind(this.vm); 
        node.addEventListener(eventName, handler); 
    } 
} 
// 处理v-model指令 
Compiler.prototype.modelUpdater = function (node, value, key) { 
    node.value = value; 
    new Watcher(this.vm, key, (newVal) => { 
        node.value = newVal; 
    }) 
    // 双向绑定，视图变化更新数据 
    node.addEventListener('input', () => { 
        this.vm[key] = node.value; 
    }) 
}

Dep

// 发布者。 
// 收集依赖，添加所有的观察者（watcher）。通知所有的观察者。 
function Dep() { 
    // 存储所有的观察者watcher 
    this.subs = []; 
} 
// 添加观察者 
Dep.prototype.addSub = function (sub) { 
    if (sub && sub.update) { 
        this.subs.push(sub); 
    } 
} 
// 发送通知 
Dep.prototype.notify = function () { 
    this.subs.forEach(sub => { 
        sub.update(); 
    }) 
}

Watcher

function Watcher(vm, key, cb) { 
    this.vm = vm; 
    this.key = key; 
    this.cb = cb; 
    // 把当前watcher对象记录到Dep类的静态属性target 
    Dep.target = this; 
    if (vm.hasOwnProperty(key)) { 
        this.oldVal = vm[key]; 
    } else { 
        const str = `vm.${key}`; 
        this.oldVal = eval(str); 
    } 
    Dep.target = null; 
} 
// 当数据发生变化的时候更新视图 
Watcher.prototype.update = function () { 
    let newVal; 
    if (this.vm.hasOwnProperty(this.key)) { 
        newVal = this.vm[this.key]; 
    } else { 
        const str = `this.vm.${this.key}`; 
        newVal = eval(str); 
    } 
    this.cb(newVal); 
}

以上这几个构造函数就实现了我们所说的迷你版本，将它们整合成一个文件vuemini.js。在上面所提示的页面引入，查看效果。

另外，我在data中绑定了一个html属性，值为一个'<div>{{msg}}</div>'，与之前完整版相比，图中的v-html下方的maomin文本也被渲染出来。

尤大开发的Vue2.x迷你版本

下面，我们将看下尤大开发的迷你版本，这个版本引入了Virtual 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>vue2mini</title> 
</head> 
 
<body> 
    <div id="app"></div> 
    <script> 
        // reactivity --- 
        let activeEffect 
 
        class Dep { 
            subscribers = new Set() 
            depend() { 
                if (activeEffect) { 
                    this.subscribers.add(activeEffect) 
                } 
            } 
            notify() { 
                this.subscribers.forEach(effect => effect()) 
            } 
        } 
 
        function watchEffect(effect) { 
            activeEffect = effect 
            effect() 
            activeEffect = null 
        } 
 
        function reactive(raw) { 
            // use Object.defineProperty 
            // 1. iterate over the existing keys 
            Object.keys(raw).forEach(key => { 
                // 2. for each key: create a corresponding dep 
                const dep = new Dep() 
 
                // 3. rewrite the property into getter/setter 
                let realValue = raw[key] 
                Object.defineProperty(raw, key, { 
                    get() { 
                        // 4. call dep methods inside getter/setter 
                        dep.depend() 
                        return realValue 
                    }, 
                    set(newValue) { 
                        realValue = newValue 
                        dep.notify() 
                    } 
                }) 
            }) 
            return raw 
        } 
 
        // vdom --- 
        function h(tag, props, children) { 
            return { tag, props, children }; 
        } 
 
        function mount(vnode, container, anchor) { 
            const el = document.createElement(vnode.tag); 
            vnode.el = el; 
            // props 
            if (vnode.props) { 
                for (const key in vnode.props) { 
                    if (key.startsWith('on')) { 
                        el.addEventListener(key.slice(2).toLowerCase(), vnode.props[key]) 
                    } else { 
                        el.setAttribute(key, vnode.props[key]); 
                    } 
                } 
            } 
            if (vnode.children) { 
                if (typeof vnode.children === "string") { 
                    el.textContent = vnode.children; 
                } else { 
                    vnode.children.forEach(child => { 
                        mount(child, el); 
                    }); 
                } 
            } 
            if (anchor) { 
                container.insertBefore(el, anchor) 
            } else { 
                container.appendChild(el); 
            } 
        } 
 
        function patch(n1, n2) { 
            // Implement this 
            // 1. check if n1 and n2 are of the same type 
            if (n1.tag !== n2.tag) { 
                // 2. if not, replace 
                const parent = n1.el.parentNode 
                const anchor = n1.el.nextSibling 
                parent.removeChild(n1.el) 
                mount(n2, parent, anchor) 
                return 
            } 
 
            const el = n2.el = n1.el 
 
            // 3. if yes 
            // 3.1 diff props 
            const oldProps = n1.props || {} 
            const newProps = n2.props || {} 
            for (const key in newProps) { 
                const newValue = newProps[key] 
                const oldValue = oldProps[key] 
                if (newValue !== oldValue) { 
                    if (newValue != null) { 
                        el.setAttribute(key, newValue) 
                    } else { 
                        el.removeAttribute(key) 
                    } 
                } 
            } 
            for (const key in oldProps) { 
                if (!(key in newProps)) { 
                    el.removeAttribute(key) 
                } 
            } 
            // 3.2 diff children 
            const oc = n1.children 
            const nc = n2.children 
            if (typeof nc === 'string') { 
                if (nc !== oc) { 
                    el.textContent = nc 
                } 
            } else if (Array.isArray(nc)) { 
                if (Array.isArray(oc)) { 
                    // array diff 
                    const commonLength = Math.min(oc.length, nc.length) 
                    for (let i = 0; i < commonLength; i++) { 
                        patch(oc[i], nc[i]) 
                    } 
                    if (nc.length > oc.length) { 
                        nc.slice(oc.length).forEach(c => mount(c, el)) 
                    } else if (oc.length > nc.length) { 
                        oc.slice(nc.length).forEach(c => { 
                            el.removeChild(c.el) 
                        }) 
                    } 
                } else { 
                    el.innerHTML = '' 
                    nc.forEach(c => mount(c, el)) 
                } 
            } 
        } 
 
        // paste all previous code from Codepen 
        const app = { 
            data: reactive({ 
                count: 0 
            }), 
            render() { 
                return h('div', { 
                    onClick: () => { 
                        app.data.count++ 
                    } 
                }, String(app.data.count)) 
            } 
        } 
 
        function mountApp(component, selector) { 
            let isMounted = false 
            let oldTree 
            watchEffect(() => { 
                if (!isMounted) { 
                    mount(oldTree = component.render(), document.querySelector(selector)) 
                    isMounted = true 
                } else { 
                    const newTree = component.render() 
                    patch(oldTree, newTree) 
                    oldTree = newTree 
                } 
            }) 
        } 
 
        mountApp(app, '#app') 
    </script> 
</body> 
 
</html>

【编辑推荐】