首页 > 其他 > 详细

vue数据绑定远原理

时间:2019-12-27 09:23:21      阅读:96      评论:0      收藏:0      [点我收藏+]
Object.defineProperty 数据劫持,给每个属性设置了get、set。
 
class myvue {
    constructor(options){
        this.$options = options;

        // 数据响应化
        this.$data = options.data;
        this.observe(this.$data);
    }

    observe(value) {
        if(!value || typeof value !== ‘object‘){
            return;
        }

        // 遍历该对象
        Object.keys(value).forEach(key => {
            this.defineReactive(value, key, value[key])
        })
    }

    defineReactive(obj, key, val) {

        this.observe(val); // 递归解决数据嵌套

        Object.defineProperty(obj, key, {
            get(){
                return val;
            },
            set(newVal) {
                if(newVal === val) {
                    return;
                }
                val = newVal;
                console.log(`${key}属性更新了:${val}`);
            }
        })
    }
}

vue数据绑定远原理

原文:https://www.cnblogs.com/rclw/p/12105317.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!