• vue数据绑定原理


    一、定义

    vue的数据双向绑定是基于Object.defineProperty方法,通过定义data属性的get和set函数来监听数据对象的变化,一旦变化,vue利用发布订阅模式,通知订阅者执行回调函数,更新dom。

    二、实现

    vue关于数据绑定的生命周期是: 利用options的data属性初始化vue实力data---》递归的为data中的属性值添加observer--》编译html模板--》为每一个{{***}}添加一个watcher;

    var app = new Vue({

      data:{

        message: 'hello world',

        age: 1,

        name: {

          firstname: 'mike',

          lastname: 'tom'

        }

      }

    });  

    1.初始化data属性

    this.$data = options.data || {};

    这个步骤比较简单将data属性挂在到vue实例上即可。

    2.递归的为data中的属性值添加observer,并且添加对应的回调函数(initbinding)

    复制代码
    function Observer(value, type) {
        this.value = value;
        this.id = ++uid;
        Object.defineProperty(value, '$observer', {
            value: this,
            enumerable: false,
            writable: true,
            configurable: true
        });
        this.walk(value); // dfs为每个属性添加ob 
     
    }
    复制代码
    复制代码
    Observer.prototype.walk = function (obj) {
        let val;
        for (let key in obj) {
            if (!obj.hasOwnProperty(key)) return;
    
            val = obj[key];
    
            // 递归this.convert(key, val);
        }
    };
    复制代码
    复制代码
    Observer.prototype.convert = function (key, val) {
        let ob = this;
        Object.defineProperty(this.value, key, {
            enumerable: true,
            configurable: true,
            get: function () {
                if (Observer.emitGet) {
                    ob.notify('get', key);
                }
                return val;
            },
            set: function (newVal) {
                if (newVal === val) return;
                val = newVal;
                ob.notify('set', key, newVal);//这里是关键
            }
        });
    };
    复制代码

    上面代码中,set函数中的notify是关键,当用户代码修改了data中的某一个属性值比如app.$data.age = 2;,那么ob.notify就会通知observer来执行上面对应的回掉函数。

    绑定回掉函数

    复制代码
    exports._updateBindingAt = function (event, path) {
        let pathAry = path.split('.');
        let r = this._rootBinding;
        for (let i = 0, l = pathAry.length; i < l; i++) {
            let key = pathAry[i];
            r = r[key];
            if (!r) return;
        }
        let subs = r._subs;
        subs.forEach((watcher) => {
            watcher.cb(); // 这里执行watcher的回掉函数
        });
    };
    
    /**
     * 执行本实例所有子实例发生了数据变动的watcher
     * @private
     */
    exports._updateChildrenBindingAt = function () {
        if (!this.$children.length) return;
        this.$children.forEach((child) => {
            if (child.$options.isComponent) return;
            child._updateBindingAt(...arguments);
        });
    };
    
    /**
     * 就是在这里定于数据对象的变化的
     * @private
     */
    exports._initBindings = function () {
        this._rootBinding = new Binding();
    
        this.observer.on('set', this._updateBindingAt.bind(this))      
    };
    复制代码

    3.编译模板

    这个是数据绑定的关键步骤,具体可以分为一下2个步骤。

    A)解析htmlElement节点,这里要dfs所有的dom和上面对应的指令(v-if,v-modal)之类的

    B)解析文本节点,把文本节点中的{{***}}解析出来,通过创建textNode的方法来解析为真正的HTML文件

    在解析的过程中,会对指令和模板添加Directive对象和Watcher对象,当data对象的属性值发生变化的时候,调用watcher的update方法,update方法中保存的是Directive对象更新dom方法,把在当directive对应的textNode的nodeValue变成新的data中的值。比如执行app.$data.age = 1;

    首先编译模板

    复制代码
    exports._compile = function () {
    
        this._compileNode(this.$el);
    };
    
    /**
     * 渲染节点
     * @param node {Element}
     * @private
     */
    exports._compileElement = function (node) {
       
        if (node.hasChildNodes()) {
            Array.from(node.childNodes).forEach(this._compileNode, this);
        }
    };
    
    /**
     * 渲染文本节点
     * @param node {Element}
     * @private
     */
    exports._compileTextNode = function (node) {
        let tokens = textParser.parse(node.nodeValue); // [{value:'姓名'}, {value: 'name‘,tag: true}]
        if (!tokens) return;
    
        tokens.forEach((token) => {
            if (token.tag) {
                // 指令节点
                let value = token.value;
                let el = document.createTextNode('');
                _.before(el, node);
                this._bindDirective('text', value, el);
            } else {
                // 普通文本节点
                let el = document.createTextNode(token.value);
                _.before(el, node);
            }
        });
    
        _.remove(node);
    };
    
    exports._compileNode = function (node) {
        switch (node.nodeType) {
            // text
            case 1:
                this._compileElement(node);
                break;
            // node
            case 3 :
                this._compileTextNode(node);
                break;
            default:
                return;
        }
    };
    复制代码

    上面代码中在编译textNode的时候会执行bindDirctive方法,该方法的作用就是绑定指令,{{***}}其实也是一条指令,只不过是一个特殊的text指令,他会在本ob对象的directives属性上push一个Directive对象。Directive对象本身在构造的时候,在构造函数中会实例化Watcher对象,并且执行directive的update方法(该方法就是把当前directive对应的dom更新),那么编译完成后就是对应的html文件了。

    复制代码
    /**
     * 生成指令
     * @param name {string} 'text' 代表是文本节点
     * @param value {string} 例如: user.name  是表示式
     * @param node {Element} 指令对应的el
     * @private
     */
    exports._bindDirective = function (name, value, node) {
        let descriptors = dirParser.parse(value);
        let dirs = this._directives;
        descriptors.forEach((descriptor) => {
            dirs.push(
                new Directive(name, node, this, descriptor)
            );
        });
    };
    复制代码
    复制代码
    function Directive(name, el, vm, descriptor) {
        this.name = name;
        this.el = el; // 对应的dom节点
        this.vm = vm;
        this.expression = descriptor.expression;
        this.arg = descriptor.arg;this._bind();
    }
    
    /**
     * @private
     */
    Directive.prototype._bind = function () {
        if (!this.expression) return;
    
        this.bind && this.bind();
    
        
            // 非组件指令走这边
            this._watcher = new Watcher(
                // 这里上下文非常关键
                // 如果是普通的非组件指令, 上下文是vm本身
                // 但是如果是prop指令, 那么上下文应该是该组件的父实例
                (this.name === 'prop' ? this.vm.$parent : this.vm),
                this.expression,
                this._update,  // 回调函数,目前是唯一的,就是更新DOM
                this           // 上下文
            );
            this.update(this._watcher.value);
        
    };

    复制代码
    复制代码
    exports.bind = function () {
    };
    
    /**
     * 这个就是textNode对应的更新函数啦
     */
    exports.update = function (value) {
        this.el['nodeValue'] = value;
        console.log("更新了", value);
    };
    复制代码

    但是,用户代码修改了data怎么办,下面是watcher的相关代码,watcher来帮你解决这个问题。

    复制代码
    /**
     * Watcher构造函数
     * 有什么用呢这个东西?两个用途
     * 1. 当指令对应的数据发生改变的时候, 执行更新DOM的update函数
     * 2. 当$watch API对应的数据发生改变的时候, 执行你自己定义的回调函数
     * @param vm 
     * @param expression {String} 表达式, 例如: "user.name"
     * @param cb {Function} 当对应的数据更新的时候执行的回调函数
     * @param ctx {Object} 回调函数执行上下文
     * @constructor
     */
    function Watcher(vm, expression, cb, ctx) {
        this.id = ++uid;
        this.vm = vm;
        this.expression = expression;
        this.cb = cb;
        this.ctx = ctx || vm;
        this.deps = Object.create(null);//deps是指那些嵌套的对象属性,比如name.frist 那么该watcher实例的deps就有2个属性name和name.first属性
        this.initDeps(expression);
    }
    /**
     * @param path {String} 指令表达式对应的路径, 例如: "user.name"
     */
    Watcher.prototype.initDeps = function (path) {
        this.addDep(path);
        this.value = this.get();
    };
    
    /**
       根据给出的路径, 去获取Binding对象。
     * 如果该Binding对象不存在,则创建它。
     * 然后把当前的watcher对象添加到binding对象上,binding对象的结构和data对象是一致的,根节点但是rootBinding,所以根据path可以找到对应的binding对象
     * @param path {string} 指令表达式对应的路径, 例如"user.name"
     */
    Watcher.prototype.addDep = function (path) {
        let vm = this.vm;
        let deps = this.deps;
        if (deps[path]) return;
        deps[path] = true;
        let binding = vm._getBindingAt(path) || vm._createBindingAt(path);
        binding._addSub(this);
    };
    复制代码

    初始化所有的绑定关系之后,就是wather的update了

    /**
     * 当数据发生更新的时候, 就是触发notify
     * 然后冒泡到顶层的时候, 就是触发updateBindingAt
     * 对应的binding包含的watcher的update方法就会被触发。
     * 就是执行watcher的cb回调。watch在
     * 两种情况, 如果是$watch调用的话,那么是你自己定义的回调函数,开始的时候initBinding已经添加了回调函数
     * 如果是directive,那么就是directive的_update方法
     * 其实就是各自对应的更新方法。比如对应文本节点来说, 就是更新nodeValue的值
     */

    三、结论

  • 相关阅读:
    Go语言
    Go语言
    electron-builder vue3 用户自定义安装目录
    提取页面中的style标签内容
    px2rpx | px转rpx
    js EventBus
    select 下拉选择多个值
    keep-alive页面缓存
    js适配移动端页面
    vue日常问题记录
  • 原文地址:https://www.cnblogs.com/knightsu/p/7230302.html
Copyright © 2020-2023  润新知