vue中的对象数据是怎么被监听的

在vue2中,数据监听是用过Object.defineProperty这个API来实现的,我们可以来看一个例子

var text = 'vue';
const data = {};
Object.defineProperty(data, 'text', {
    get() {
        return text;
    },
    set(newVal) {
        text = newVal;
    }
});
data.text // 'vue'
data.text = 'react' // 'react'

当我们访问或设置对象的属性的时候,都会触发相对应的函数,然后在这个函数里返回或设置属性的值。我们当然可以在触发函数的时候做我们自己想做的事情,这也就是“劫持”操作。

在Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作,并创建一个监听器,当数据发生变化的时候发出通知。

var data = {
    name:'hello',
    age:18
}

Object.keys(data).forEach(function(key){
    Object.defineProperty(data,key,{
        enumerable:true, // 是否能在for...in循环中遍历出来或在Object.keys中列举出来。
        configurable:true, // false,不可修改、删除目标属性或修改属性性以下特性
        get:function(){
            console.log('获取数据');
        },
        set:function(){
            console.log('监听到数据发生了变化');
        }
    })
});
data.name //控制台会打印出 “获取数据”
data.name = 'world' //控制台会打印出 "监听到数据发生了变化"

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

发表评论
暂无评论