<!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. [BZOJ2431][HAOI2009]逆序对数列(DP)

    从小到大加数,根据加入的位置转移,裸的背包DP. #include<cstdio> #include<cstring> #include<algorithm> #d ...

  2. 2018BNU校赛总决赛

    题解是qls的题解我就懒得写了23333 A塞特斯玛斯塔 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K 64bit IO Format: %lld ...

  3. C++ -- STL泛型编程（二）之set

    set集合容器实现了红黑树的平衡二叉检索树的数据结构,在插入元素时候它会自动调整二叉树的排列,把元素放在适当的位置,以确保每个子树根节点的键值都大于左子树的所有节点的键值,而小于右子树的所有节点的键值 ...

  4. Codeforces Round #346 (Div. 2) F. Polycarp and Hay 并查集 bfs

    F. Polycarp and Hay 题目连接: http://www.codeforces.com/contest/659/problem/F Description The farmer Pol ...

  5. 更新yum源/apt-get源

    国内开源镜像站有:网易: http://mirrors.163.com/ 搜狐: http://mirrors.sohu.com/阿里云: http://mirrors.aliyun.com/北京理工 ...

  6. extjs grid数据改变后刷新的实现

    做了一个编辑extjs grid记录的窗体,但更改数据后,怎么重新刷新grid让数据显示呢? 做了半天的尝试,其实到最后只需一句话,faint:-) this.store.reload(); 不用加任 ...

  7. 【转】2012年6月26 – PPS网络电视PHP工程师最新面试题

    每一次面试都是一场较量,和面试官,更是和你自己! 前言:虽然面试职位是PHP工程师,但题目仅绝非限于PHP,甚至都没有多少PHP的题!inner peace!希望能给你带了一丝帮助. PPS网络电视面 ...

  8. C++输出上三角/下三角/菱形/杨辉三角形

    1.输出上三角形 第一行1个星,第二行3个星,第三行5个星,第四行7个星,第五行9个星. 分析:三角形的形状由输出的空白和星组成,通过分析每一行输出几个空格,几个星,就可完成输出三角形的工作. #in ...

  9. 剑客vs刀客 Java vs .NET

    刀,无鞘的刀,重三十六斤六两三分,刀重而不大,重而不笨,千年寒铁精炼而成,刀身颀长,刀背轻薄,锋利异常,刀身桔黄色,隐隐泛着青色,刀面嵌龙凤图案,似龙吟,似凤鸣.刀柄带有两环,轻轻撞击会发出" ...

  10. 一步一步部署WPF浏览器应用程序

    WPF浏览器应用程序与Silverlight,Asp.net相比,同是发布到服务器,在IE中运行.WPF浏览器应用程序部署起来却相对困难. 相信很多朋友在第一次部署WPF浏览器应用程序时,都遇到&qu ...