<!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. bzoj 2693

    收获: 1.积性函数的积也是积性函数,基本的积性函数:常数函数,正比例函数,欧拉函数,Mobius函数,积性函数一般都知道表达式,所以一般都可以在线性筛时搞定. 2.遇到整除求和时,这个东西就已经是最 ...

  2. Java 请求webServce接口 带参数

    public String getWebServiceByParams(String param){ //获取基金缴付记录 // Post请求的url,与get不同的是不需要带参数 URL postU ...

  3. 树形DP+（分组背包||二叉树,一般树,森林之间的转换）codevs 1378 选课

    codevs 1378 选课 时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond  题目描述 Description 学校实行学分制.每门的必修课都有固定的学分 ...

  4. Bellman-ford 算法详解

    昨天说的dijkstra固然很好用,但是却解决不了负权边,想要解决这个问题,就要用到Bellman-ford. 我个人认为Bellman-Ford比dijkstra要好理解一些,还是先上数据(有向图) ...

  5. [转]runOnUiThread 、 Handler 对比（一）

      this.runOnUiThread(new Runnable() { @Override public void run() { try { Thread.sleep(1000 * 5); }  ...

  6. [转]Android Service完全解析，关于服务你所需知道的一切

      目录(?)[+] Android Service完全解析,关于服务你所需知道的一切(上) 分类: Android疑难解析2013-10-31 08:10 6451人阅读 评论(39) 收藏 举报 ...

  7. Codeforces Beta Round #9 (Div. 2 Only) A. Die Roll 水题

    A. Die Roll 题目连接: http://www.codeforces.com/contest/9/problem/A Description Yakko, Wakko and Dot, wo ...

  8. react-native-image-zoom-viewer学习

    github原地址 react-native-image-zoom-viewer实现了类似微信朋友圈浏览图片的效果,点击小图片实现浏览原图效果. 安装: npm i react-native-imag ...

  9. CentOS 7安装ifconfig

    yum install net-tools 安装这个工具,或者升级写法,使用ip addr show 参考: https://linux.cn/article-3631-1.html

  10. picker.js源码

    /** * LArea移动端城市选择控件 * * version:1.7.2 * * author:黄磊 * * git:https://github.com/xfhxbb/LArea * * Cop ...