设想这么一个需求:

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. computed计算属性

    在computed中,可以定义一些属性,这些属性 叫做计算属性.计算属性的本质是一个方法,只不过我们在使用的时候,把他们的名称当做属性来使用,并不会吧计算属性当做方法去调用.与methods平级. / ...

  2. Maven Install报错:Perhaps you are running on a JRE rather than a JDK?

    我用的是idea,解决办法是:安装jdk,配置环境变量

  3. cadcam

    Email:kefu007@vip.qq.com 13D TIMON 2007 英語版2007 23DVIA Composer V6R2013 中文版2013 3ABQUS V6.11 6.11 4A ...

  4. vue computed、methods、watch的区别

    1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...

  5. jdk7_ConcurrentHashMap 图示

    jdk7_ConcurrentHashMap初始化图示 jdk7_ConcurrentHashMap_put和get操作_扩容_线程安全的分析

  6. Python-数据类型之元组

    一:元组 元组是一个只读列表,可以使用count,index等,但是元组里的元素不能更改,也不能增加,删除 元祖的一级元素不可更改,当一级元素有可变数据类型时,如列表,列表中的元素可变 tup = ( ...

  7. 解决MongoDB登录的WARNING

    解决MongoDB登录的WARNING 1.安装完成运行mongodb警告内容如下: 2019-01-17T15:41:50.578+0800 I CONTROL [initandlisten] ** ...

  8. apache poi 读取xlsx并导出为json(没考虑xls)

    1.用到的jar包:fastjson-1.2.9.poi(poi-3.15.poi-ooxml-3.15.poi-ooxml-schemas-3.15.xmlbeans-2.6.0.commons-c ...

  9. Log4j使用笔记:每天生成一个日志文件、按日志大小生成文件

    其中TestLog4j.java如下: package cn.zhoucy.test; import org.apache.log4j.Logger; public class TestLog4j { ...

  10. keras安装-【老鱼学keras】

    为何要用keras? 两个字:简单. Keras让深度学习像搭建积木一样方便地来进行,使前面的tensorflow能够更加方便地使用. 虽然还有其它更多的理由,比如:Keras 支持多个后端引擎,不会 ...