如何在vue中使用Object.defineProperty监听对象属性?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
let a = {'b': 1};
Object.defineProperty(a, 'b', {
enumerable: false,
configurable: false,
get: function(){
console.log('b' + '被访问');
},
set: function(newVal){
console.log('b' + '被修改,新' + 'b' + '=' + newVal);
}
});
a.b = 2; // b被修改,新b=2
a.b; // b被访问
这样,我们就能监听对象了!但问题并不仅仅这么简单。。。
我们可能会有对象中属性的值还是对象这种嵌套情况,可以通过递归解决!
在vue源代码文件 srcobserveobserver.js 中
// 观察者构造函数
function Observer(data){
this.data = data;
this.walk(data);
}
let p = Observer.prototype;
p.walk = function(obj){
let val;
for(let key in obj){
// 通过 hasOwnProperty 过滤掉一个对象本身拥有的属性
if(obj.hasOwnProperty(key)){
val = obj[key];
// 递归调用 循环所有对象出来
if(typeof val === 'object'){
new Observer(val);
}
this.convert(key, val);
}
}
};
p.convert = function(key, val){
Object.defineProperty(this.data, key, {
enumerable: false,
configurable: false,
get: function(){
console.log(key + '被访问');
},
set: function(newVal){
console.log(key + '被修改,新' + key + '=' + newVal);
if(newVal === val) return ;
val = newVal;
}
})
};
let data = {
user: {
name: 'zhangsan',
age: 14
},
address: {
city: 'beijing'
}
}
let app = new Observer(data);
data.user.name; // user被访问
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
关于如何在vue中使用Object.defineProperty监听对象属性问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。