码迷,mamicode.com
首页 > 其他好文 > 详细

vue数据绑定远原理

时间:2019-12-27 09:54:23      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:console   foreach   vue   data   nbsp   cto   turn   原理   eof   

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数据绑定远原理

标签:console   foreach   vue   data   nbsp   cto   turn   原理   eof   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!