<!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. 51nod1981 如何愉快地与STL玩耍

    先摆官方题解吧......... ....................有什么好讲的呢....... 注意一些地方常数优化一下.......然后......$bitset$怎么暴力怎么来吧..... ...

  2. 【尺取法好题】POJ2566-Bound Found

    [题目大意] 给出一个整数列,求一段子序列之和最接近所给出的t.输出该段子序列之和及左右端点. [思路] ……前缀和比较神奇的想法.一般来说,我们必须要保证数列单调性,才能使用尺取法. 预处理出前i个 ...

  3. 使用百度ai接口加图灵机器人完成简单web版语音对话

    app文件 from flask import Flask, request, render_template, jsonify, send_file from uuid import uuid4 i ...

  4. MODI出现ORC RUNNING ERROR的解决方法

    stackflow都没个靠谱的说法,最后还是csdn上看到的.转一个备用.http://bbs.csdn.net/topics/390135443 由于直接执行Mircosoft Office Doc ...

  5. java中代码块的认知

    在以往面试题中,出现过很多次关于代码块执行顺序的题目,目前可算是搞清楚执行顺序了.看以下代码: package com.itcast.code; public class BlockTest { st ...

  6. [转] Eclipse的Tomcat插件安装

      Eclipse的Tomcat服务器插件tomcatPlugin是由Sysdeo公司开发的,其下载地址是:http://www.eclipsetotale.com/tomcatPlugin.html ...

  7. [转]android中OnTouch和OnClick、 imagebutton的src和background有什么区别

    1.OnTouch和OnClick有何区别?   专业回答 1.onClick就传入一个View对象,而 onTouch要传入一个View 对象和 MotionEvent的对象2.onTouch对控件 ...

  8. mysql事件的开启和调用

    检测事件是否开启 show variables like 'event_scheduler'; 开启事件 set global event_scheduler = on; 创建一个存储过程 delim ...

  9. Scrapy入门教程(转)

    关键字:scrapy 入门教程 爬虫 Spider作者:http://www.cnblogs.com/txw1958/出处:http://www.cnblogs.com/txw1958/archive ...

  10. HDU 3966 Aragorn's Story （树链剖分+树状数组）

    Aragorn's Story Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...