js监听对象属性的变化

最新推荐文章于 2024-07-16 20:08:38 发布
最新推荐文章于 2024-07-16 20:08:38 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43654065/article/details/119732704
版权

 效果：实时监听data.num的值，根据该值改变盒子的背景色。

 

 代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script type="./statics/js/jquery.js"></script>
  <title>two-way binding</title>
  <style>
    .test1 {
      width: 200px;
      height: 200px;
      background-color: bisque;
      margin: 50px;
      transition: all .6s; 
    }
  </style>
</head>

<body>

  <div class="test1"></div>

<script>
    var data = { _num: 1 }
    Object.defineProperty(data, "num", {
      get: function () {
        return this._num;
      },
      set: function (value) {
        console.log(`data.num:` + value)
        if (value == this._num) {
          $(".test1").css("background-color", "red")
        } else {
          $(".test1").css("background-color", "yellow")
        }
      }
    })

    $(".test1").hover(function () {
      data.num = 2
    }, function () {
      data.num = 1
    })

  </script>
</body>

</html>

es5的getter和setter方法

在ES5中新增了一个Object.defineProperty，直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

Object.defineProperty(obj, prop, descriptor)

基于ES5的getter和setter可以说几乎完美符合了要求。为什么要说几乎呢？

首先IE8及更低版本IE是无法使用的，而且这个特性是没有polyfill的，无法在不支持的平台实现，这也是基于ES5getter和setter的Vue.js不支持IE8及更低版本IE的原因。也许有人会提到avalon，avalon在低版本IE借助vbscript一些黑魔法实现了类似的功能。

除此之外，还有一个问题就是修改数组的length，直接用索引设置元素如items[0] = {}，以及数组的push等变异方法是无法触发setter的。
如果想要解决这个问题可以参考Vue的做法，在Vue的observer/array.js中，Vue直接修改了数组的原型方法。

参考：https://www.zhihu.com/question/44724640

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

在线小白www
关注
专栏目录
vue监听对象及对象属性问题
12-04
本文将详细介绍如何在Vue中监听对象以及对象属性的问题。 首先，我们来看如何监听整个对象的变化。在提供的代码示例中，我们创建了一个名为`a`的对象，包含两个属性`b`和`c`。要监听`a`对象的所有属性变化，可以...
JS如何监听一个变量改变？
量子前端的博客
04-06 3339
Proxy相比于基于Proxy和Reflect，可以原生监听数组，可以监听对象属性的添加和删除不需要深度遍历监听：判断当前的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测只在getter时才对对象的下一层进行劫持(优化了性能)而Proxy除了兼容性不足以外，其他方面的表示都优于。所以，建议使用Proxy监测变量变化。
深入探索：JavaScript中监听对象属性变化的几种方法
wanglf_clog的博客
05-11 2334
你不得不知道的JavaScript中监听对象属性变化的几种方式，学到就是赚到。
JavaScript 事件监听详解
最新发布
xycxycooo的博客
07-16 1799
在 JavaScript 编程中，事件监听是一种非常重要的机制，它允许我们在特定的事件发生时执行特定的代码。在这个示例中，点击内层 div 时，会先触发内层 div 的点击事件，然后触发外层 div 的点击事件（冒泡阶段）。在这个示例中，点击内层 div 时，会先触发外层 div 的点击事件，然后触发内层 div 的点击事件（捕获阶段）。事件对象包含有关事件的详细信息，如事件类型、目标元素、鼠标位置等。在这个示例中，点击内层 div 时，只会触发内层 div 的点击事件，不会触发外层 div 的点击事件。
JavaScript中监听对象的操作方式
唐璜Taro的博客
10-16 2377
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。以上就是JavaScript中监听对象的描述符的讲解。
监听对象中属性变化（一个或多个属性、全部属性）
m0_62508027的博客
09-10 1283
数据监听器的使用，监听对象中的一个或多个属性、监听对象中的全部属性
js中如何监听一个对象中属性的变化
zhouyuzhu666的博客
09-06 3740
要想监听属性的变化，首先需要通过Object.defineProperty()为需要监听的属性设置一个代理。通过改变代理的值，触发get和set的方法，在这两个方法中我们编写我们想要的操作。 var book = { _year: 2020, //下划线表示是内部属性，只能通过对象的方法来读写 editor: 1 }; Object.defineProperty(book, 'year', { get: function () { return this._year;
解决Vue2.0 watch对象属性变化监听不到的问题
10-18
这种限制导致了即使我们更新了对象的属性，Vue的响应式系统也可能无法及时察觉到这些变化，从而使得使用watch来监听对象属性变化失效。 为了解决这个问题，Vue官方提供了一个方法，即使用`this.$set`方法。`this.$...
Vue项目中数据的深度监听或对象属性的监听实例
09-16
综上所述，在Vue项目中，深度监听是一种非常有用的特性，尤其是在需要监听对象内部属性变化的场景下。同时，计算属性和监听属性也是开发者必须掌握的重要概念，它们各自有不同的应用场景。合理地利用这些特性，可以...
JS33 监听对象 Object.defineProperty 数据代理 vue中数据代理原理
weixiwo的博客
03-08 562
这里只简要介绍一下，Object.defineProperty也是vue数据双向绑定原理，关于其参数，监听对象，属性，这里面还有方法对象。当数据改变时，可以使用set方法来改变。
js深度监听对象的变化
qq_62336903的博客
10-17 2056
js深度监听对象的变化。
js监听对象的方式
weixin_44283589的博客
08-30 732
【代码】js监听对象的方式。
JS 监听元素dom变化
一只路过的小码农
03-24 4769
我们在开发中，会遇到一些需求，需要监听元素变化，比如元素属性变化，元素大小变化，今天，我们就来聊聊俩种常用实现监听的方案，其他的自行研究。
JS监听对象属性＜ES5和ES6详解＞
mkbird的博客
05-06 1941
文章目录JS监听对象属性Object.defineProperty()ProxyObject.defineProperty与Proxy区别ES5中，通过defineProperty()的set进行监听ES6中，通过Proxy实现 JS监听对象属性 在这之前，先了解以下稍后要用到的知识 Object.defineProperty() // Object.defineProperty() 方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象 Object.defineProperty
js监听html元素值变化,监听元素属性改变事件的方法
weixin_33139275的博客
06-10 8784
监听元素属性改变事件的方法原创Red_Ant_hoyl2018-08-30 01:12:35著作权文章分类html技术阅读数10764©著作权归作者所有：来自51CTO博客作者Red_Ant_hoyl的原创作品，如需转载，请与作者联系，否则将追究法律责任https://blog.51cto.com/u_13479739/2166248**一、onchange事件**只在键盘或者鼠标操作改变对象属性...
JS实时检测变量的值是否变化
w2sft的博客
04-13 2471
这段代码中，使用了对象，defineProperties方法可以设置或修改对像的属性，对像的get、set分别是取值、赋值方法。于是便可以优雅的监视变量值。实时监视一个变量的值，当值发生改变时，马上给出提示。虽然确实可以实现，但笨拙且低效果。
JS 实现对象监听 - Kaiqisan
Kaiqisan的博客
06-23 3134
实现监听的底层原理，能够实现在数据修改的时候触发回调函数~
【JavaScript】用Object.definePropety()对对象的属性实现监听和修改
TA远方
11-15 622
本文中会讲到对象函数Object.definePropety()，也许你对这个函数比较陌生，要知道这个函数用途可大了，等自己想到它的时候，就知道它的重要性。
vue监听对象属性值变化
05-19
在 Vue 中，你可以使用 `watch` 属性来监听对象属性值的变化。 假设你有一个对象 `data`，它有一个属性 `name`，你想要监听 `name` 的变化，可以在 Vue 组件中添加以下代码： ```javascript watch: { 'data.name': function(newValue, oldValue) { console.log('name 的值从 ' + oldValue + ' 变为了 ' + newValue); } } ``` 上面的代码中，`watch` 属性用来监听 `data.name` 属性的变化。当这个属性的值发生变化时，`watch` 中定义的回调函数会被调用，同时会传入新值和旧值作为参数。在回调函数中，你可以进行一些操作，比如打印日志。 还可以使用深度监听来监听对象内部属性的变化。比如你有一个对象 `user`，它有一个属性 `info`，你想要监听 `info` 内部的属性变化，可以在 Vue 组件中添加以下代码： ```javascript watch: { 'user.info': { handler: function(newValue, oldValue) { console.log('info 的值从 ' + oldValue + ' 变为了 ' + newValue); }, deep: true } } ``` 上面的代码中，`deep` 属性被设置为 `true`，表示深度监听。这样，当 `user.info` 内部的属性发生变化时，`watch` 中定义的回调函数也会被调用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值