设想这么一个需求:

user.name = '张三'

对user数据进行操作的时候,同步的修改页面上的用户名为张三。

这就是个数据绑定的概念。

针对这类需求

ES5提供了Object.defineProperty函数

使用方式如下所示:

 Object.defineProperty(user, 'name', {
set:function(key,value){
//此处拦截了设置请求
} });

但是,如果为user增加一个新的属性,比如user里没有id属性,增加一个 user.id=1,Object.defineProperty函数是不知道存在'id'的,也就无法写出上面的代码,这可以用ES6提供的Proxy代理处理,代码如下:

var user = new Proxy({},{
set:function(target,key,value,receiver){
//处理代码
}
})

JS监听对象属性改变的更多相关文章

  1. Object.defineProperty 监听对象属性变化

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. 原生js监听input值改变事件

    哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...

  3. vue2.0使用watch监听对象属性

    二话不说直接代码,找了一个百度都没找到.... var head=new Vue({ data:{ checkBoxState:{//监听设置开关勾选状态 notice:true, sound:tru ...

  4. AngularJS - Watch 监听对象

    <body> <div ng-app="myApp"> <div ng-controller="firstController"& ...

  5. 使用Node.JS监听文件夹变化

    使用Node.JS监听文件夹改变有许多应用场合,比如: 构建自动编绎工具 当源文件改变时,自动运行build过程,比如当你写CoffeeScript文件或SASS CSS文件时,保存之后可即时生成对应 ...

  6. 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...

  7. vue--》如何使用wacth监听对象的属性变化?

    在开发过程中,我们经常需要监听watch监听一个对象的变化,但是如何来实现     监听对象中属性的变化呢? 先回顾一下如何监听整个对象的变化,使用watch就行了 export default { ...

  8. watch监听对象的属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

随机推荐

  1. 有名的素MM

    from math import sqrt item=[] for yr in [1988,1989]: for mth in range(1,13): if mth in [1,3,5,7,8,10 ...

  2. STM32 USB 鼠标+键盘 串口控制

    *MOS0101000000# 鼠标左键按下 *MOS0102000000# 鼠标右键按下 *MOS0103000000# 鼠标中键按下 *MOS0100000000# 鼠标抬起 *MOS01000a ...

  3. Qt-c++桌面编程报错:qt.qpa.plugin: Could not find the Qt platform plugin "windows" in "",已解决

    语言:c++ 编译库:Qt GUI,qt5.12.1 软件类型:Qt application,qt桌面软件 运行平台:window 10 ?按照[https://www.devbean.net/201 ...

  4. 【Git】git rebase报错new blank line at EOF.处理

    执行git rebase报错如下: First, rewinding head to replay your work on top of it... Applying: 本次提交信息 .git/re ...

  5. 2018-2019-2 网络对抗技术 20165323 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165323 Exp2 后门原理与实践 一.实验要求 (3.5分) (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用soc ...

  6. knn算法详解

    邻近算法,或者说K最近邻(kNN,k-NearestNeighbor)分类算法是数据挖掘分类技术中最简单的方法之一.所谓K最近邻,就是k个最近的邻居的意思,说的是每个样本都可以用它最接近的k个邻居来代 ...

  7. ***报错Class 'Redis' not found in(原创)

    报错:Class 'Redis' not found in 这个报错,表明phpredis 扩展没有安装好,而不是redis没有安装 有没有安装成功这个扩展,可以通过phpinfo来查看. 解决问题的 ...

  8. postgresql 53300错误

    1.查看当前库的最大连接数 show max_connections; 2.查看当前数据库的活动连接数 select datname,application_name,pid,state from p ...

  9. Extjs4.2 GridPanel中显示单选按钮

    效果:如上图. 代码:其中需要显示单选按钮的列 { dataIndex: 'FeeModel', text: '收費模式', flex: 1, align: 'left', radioValues: ...

  10. Linux从入门到进阶全集——【第十四集:Shell编程】

    正则表达式(与通配符) 正则表达式:匹配字符串,属于包含匹配[只要包含匹配条件就行],grep,awk,sed等命令支持正则表达式 通配符(*,?,[]):匹配文件名,属于完全匹配[必须是完全匹配条件 ...