<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>Object.defineProperty 监听对象属性变化</title>

    </head>

    <body>

        <script type="text/javascript">

            let obj = {}

            let value = ''

            Object.defineProperty(obj, 'name', {

                get: () => {

                    return value

                },

                set: (newVal) => {

                    console.log('检测到变化', newVal);

                    value = newVal;

                }

            })

            console.log(obj.name, ' 1')

            obj.name = 'mfg'

            console.log(obj.name, ' 2')

        </script>

    </body>

</html>

Object.defineProperty 监听对象属性变化的更多相关文章

  1. js 数据监听--对象的变化

    class Observer { constructor(data) { this.data = data; this.filterObj(data); } static isObject(obj) ...

  2. JS监听对象属性改变

    设想这么一个需求: user.name = '张三' 对user数据进行操作的时候,同步的修改页面上的用户名为张三. 这就是个数据绑定的概念. 针对这类需求 ES5提供了Object.definePr ...

  3. vue2.0使用watch监听对象属性

    二话不说直接代码,找了一个百度都没找到.... var head=new Vue({ data:{ checkBoxState:{//监听设置开关勾选状态 notice:true, sound:tru ...

  4. vue 2.0 watch 监听对象的变化

  5. AngularJS - Watch 监听对象

    <body> <div ng-app="myApp"> <div ng-controller="firstController"& ...

  6. vue--》如何使用wacth监听对象的属性变化？

    在开发过程中,我们经常需要监听watch监听一个对象的变化,但是如何来实现     监听对象中属性的变化呢? 先回顾一下如何监听整个对象的变化,使用watch就行了 export default { ...

  7. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  8. Proxy监听对象的数据变化，处理绑定数据很有用

    Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作.一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处. }; //interceptor 拦截 var ...

  9. watch监听对象的属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 常用数据库validationQuery检查语句

    数据库 validationQuery Oracle select 1 from dual DB2 select 1 from sysibm.sysdummy1  mysql select 1  mi ...

  2. [原]Android Studio导入外部项目找不到对应的sdk解决办法

    示例项目:JPushExample(349872) 打开项目的文件夹目录,找到:JPushExample(349872)\app\build.gradle打开,将里面的 compileSdkVersi ...

  3. Educational Codeforces Round 12 A. Buses Between Cities 水题

    A. Buses Between Cities 题目连接: http://www.codeforces.com/contest/665/problem/A Description Buses run ...

  4. PAT甲级1076. Forwards on Weibo

    PAT甲级1076. Forwards on Weibo 题意: 微博被称为中文版的Twitter.微博上的一位用户可能会有很多关注者,也可能会跟随许多其他用户.因此,社会网络与追随者的关系形成.当用 ...

  5. linux基础命令学习 （八）磁盘空间

    一.df linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.于du不同的是,du是面向文件的命令,只计算被文件占用的空间.不计算文件系统metadata 占用的空间.d ...

  6. Virtual Treeview 安装以及入门

    Virtual Treeview是一套Delphi下优秀的VCL控件,代码质量高,使用灵活.功能强大.性能非常好,可以用于表达Treeview和表格类数据.它的代码现在托管在google code上. ...

  7. 几个未公开的 DBCC 命令

    http://blog.csdn.net/CathySun118/article/category/538610 https://ask.hellobi.com/blog/lyhabc/1612 1. ...

  8. 7款Flash和Javascript网页视频播放器

    Flash和javascript网页视频播放器.梦想中的视频播放器是这样的: 支持所有格式,兼容所有主流视频网站,支持播放列表.视频缩略图.全屏播放.画面调节.预加载.体积贼小,功能贼多……. 也许你 ...

  9. spm教程

    1.spm初学者教程:http://www.ernohermans.com/wp-content/uploads/2011/11/spm8_startersguide.pdf 2.spm官方mannu ...

  10. RxJava 中文文档

    https://mcxiaoke.gitbooks.io/rxdocs/content/Subject.html