<!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. [NOI2011]阿狸的打字机 --- AC自动机 + 树状数组

    [NOI2011] 阿狸的打字机 题目描述: 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机. 打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母.经阿狸研究发现, ...

  2. 精通android体系架构、mvc、常见的设计模式、控制反转（ioc）

    1.请看某个著名的it公司一则招聘信息的其中一条要求:“熟悉android系统架构及相关技术,1年以上实际android平台开发经验:”,里面非常明确的说道要求熟练android系统架构,这从某种程度 ...

  3. bzoj 2440

    题意:有一个从小到大的由不包含平方约数的数组成的数列,从1开始,求第k项. “满足某种限制的数的第k个”+二分答案="前n个数有多少个数满足限制“ 求[1,n]中有多少个数没有平方约数,我们 ...

  4. April Fools Day Contest 2016 C. Without Text 信号与系统

    C. Without Text 题目连接: http://www.codeforces.com/contest/656/problem/C Description You can preview th ...

  5. HDU 5298 Solid Geometry Homework 暴力

    Solid Geometry Homework 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5298 Description Yellowstar ...

  6. How to put a relative path for a DLL statically loaded?

    How to put a relative path for a DLL statically loaded? I have a DLL made in Delphi 7/Windows XP tha ...

  7. Druid 配置_LogFilter

    Druid内置提供了四种LogFilter(Log4jFilter.Log4j2Filter.CommonsLogFilter.Slf4jLogFilter),用于输出JDBC执行的日志.这些Filt ...

  8. [转].net reactor 学习系列(四)---.net reactor应用场景

    前面已经学习了.net reactor一些基础知识,现在准备学习下实际的应用场景,只是简单的保护和许可证发放场景.如果想应用更高级的场景比如自动化程序许可证的发放及自定义客户端的过期提示等等就需要自己 ...

  9. jq幻灯片2013-8-31

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 容器+AOP实现动态部署(四)

    上篇咱们介绍了容器和AOP的结合,结合后怎样将对象增强服务并没有过多的说明,这里将详细说明怎样将对象 进行增强 ,达到一个一对多和多对多的增强方式 先从简单的方式说起 /** *JDK代理类,实现动态 ...