<!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. JZYZOJ1525 HAOI2012道路 堆优化的dijkstra+pair

    From Tyvj Guest ☆[haoi2012]道路                 描述 Description     C国有n座城市,城市之间通过m条单向道路连接.一条路径被称为最短路,当 ...

  2. stl upper_bound()

    http://blog.csdn.net/niushuai666/article/details/6734650   upper_bound( a , b , k )返回有序升序序列[a,b)中能放下 ...

  3. HTML5开发的翻页效果实例

    简介2010年F-i.com和Google Chrome团队合力致力于主题为<20 Things I Learned about Browsers and the Web>(www.20t ...

  4. The New Virtual List Box in Delphi 6 - lbVirtual lbVirtualOwnerDraw

    http://users.atw.hu/delphicikk/listaz.php?id=2471&oldal=52 Problem/Question/Abstract: What are t ...

  5. Maven编译代码的相关命令

    第一.main目录下的主代码编写完毕后,使用Maven进行编译,在项目根目录下运行命令mvn clean compile进       行项目编译. 第二.test目录下的测试用例编写完毕之后就可以调 ...

  6. mount 和 umount 命令

    参考:http://man.chinaunix.net/linux/mandrake/101/zh_cn/Command-Line.html/fs-and-mntpoints-mount.html 现 ...

  7. .NET：用T4消除代码重复，对了，也错了

    背景 我需要为int.long.float等这些数值类型写一些扩展方法,但是我发现他们不是一个继承体系,我的第一个思维就是需要为每个类型重复写一遍扩展方法,这让我觉得非常不爽,但是我还是不情愿的写了, ...

  8. python笔记20-yaml文件写入(ruamel.yaml)

    前言 yaml作为配置文件是非常友好的一种格式,前面一篇讲了yaml的一些基础语法和读取方法,本篇继续讲yaml文件写入方法 用yaml模块写入字典嵌套字典这种复杂的数据,会出现大括号{ },不是真正 ...

  9. IDE的文件和代码模板

    设置IDE的的模板,可以在创建文件的时候,自动产生模板内容,模板里可以 模板头设置: # -*- coding: utf- -*- """ --------------- ...

  10. kafka生产者、消费者java示例

    1. 生产者 import java.util.Properties; import kafka.javaapi.producer.Producer; import kafka.producer.Ke ...