原生js实现监控变量值变化了，自动修改页面内容

杭杭爸爸

于 2023-08-07 15:04:39 发布

阅读量722

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/lk419121010221/article/details/132146498

版权

文章介绍了如何在JavaScript中使用Object.defineProperty()方法创建一个可观察的message属性，当message的值被设置时，会更新DOM元素并打印日志。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var data = { message: 'Hello' };

Object.defineProperty(data, 'message', {
  get: function() {
    return this._message;
  },
  set: function(value) {
    this._message = value;
    document.getElementById('app').textContent = value;
    console.log('变量值已经改变为：', value);
  }
});


//调用：
data.message = 'New message';

//再次调用会改变text属性
data.message = 'New message2222222';