一、定义

①方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。

②vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截器。

二、语法

①语法

/*
* @param: obj:需要定义属性的对象;
* prop:需要定义或修改的属性;
* descriptor:将被定义或修改属性的描述符
*/
Object.defineProperty(obj,prop,descriptor)

②对象里目前存在的属性描述符主要有两种形式: 数据描述符和存取描述符

  • 数据描述符: 拥有可写或不可写值的属性
可选键值:
configurable: 当且仅当configurable为true时,改属性描述符才能够被改变,也能被删除
enumerable: 当其值为true时,该属性才能够出现在对象的枚举属性中,默认为false
writable: 当且仅当该属性的值为true时,该属性才能被赋值运算符改变, 默认为false。
value: 该属性对应的值,可以是任意有效的javascript的值(数值,对象,函数等),默认为undefined
  • 存取描述符: 由一对getter-setter函数功能来描述的属性
可选键值:
configurable: 当且仅当configurable为true时,改属性描述符才能够被改变,也能被删除
enumerable: 当其值为true时,该属性才能够出现在对象的枚举属性中,默认为false
get: 给属性提供getter的方法,如果没有 getter 则为undefined。当我们读取某个属性的时候,其实是在对象内部调用了该 方法,此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined
set:设置属性值的方法, 如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。也就是说,当我们设置某个属性的时候,实际上是在对象的内部调用了该方法

③示范:

        let user={
foo:'bar'
};
user.age=18;
user['name']='eric';
Object.defineProperty(user,'gender',{
// value:'男'
// value 和get两者只能取其一,因为是矛盾的
// get属性用于属性访问,当访问gender的时候,会自动调用get方法
get:function(){
console.log('取值操作了')
return 123
},
// set 属性设置器,当设置user.gender=xxx,则会自动调用set方法,xxx作为set的参数
set:function(value){
console.log('赋值操作'+value)
}
});
// user.gender 取值操作了 123
// user.gender=666 赋值操作666

三、例子

①设置user.age 如果要对age赋值,则限制age的取值范围:0-120之间

        var age=0;
var user={};
Object.defineProperty(user,'age',{
//value:18,
get:function(){
return age;
},
set:function(val){
if(val<0||val>120){
throw new Error('age invalid')
}
// 赋值(不能直接赋值,需要有一个中间变量)
age=val;
},
});
// user.age 0
// user.age=1 1
// user.age=-1 age invalid

②当data.message的值改变的时候更新#test的视图

    <div id="test">这是一个测试</div>
<script>
var view = document.getElementById("test");
var data = {};
var i = 0;
Object.defineProperty(data, "message", {
set: function (newValue) {
//当data.message的值改变的时候更新#test的视图
view.textContent = newValue;
},
});
setInterval(function () {
i++;
data["message"] = "data.message的值更新了,我要更新视图" + i;
}, 1000);
</script>

Vue的数据双向绑定原理——Object-defineProperty的更多相关文章

  1. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  2. 前端数据双向绑定原理:Object.defineProperty()

    Object.definedProperty方法可以在一个对象上直接定义一个新的属性.或修改一个对象已经存在的属性,最终返回这个对象. Object.defineProperty(obj, prop, ...

  3. 对象的属性类型 和 VUE的数据双向绑定原理

    如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty()  //IE9+  和标准浏览器  支持 查看属性的 ...

  4. 关于简单的数据双向绑定原理,defineProperty 和Proxy演示

    双向绑定,也就是说js中的数据传到页面,页面中的内容到js,实现同步更新,简单的演示可以直接复制下放HTML代码运行. 在这个例子中,我们使用defineProperty ,Object.define ...

  5. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  6. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

  7. vuejs数据双向绑定原理(get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  8. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  9. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

随机推荐

  1. Java的表达式和运算符

    一.算术运算符 运算符 + - * / % 说明 加 减 乘 除 取模(余数) 例子 1+2 5-3 20*5 6/4 30%9 结果 3 2 100 1 3 int x = 10; int y = ...

  2. 关于 返回数据类型 后 加& 的作用

    关于  返回数据类型 后 加& 的作用 请看以下图片 我的测试 //纯粹就是 为了 可作为 左值而存在的 方法 前 的返回值 int& ,如 int& Method(); // ...

  3. C# 手写将对象转换为Json方法

    一.需求场景 (1)不能用JavaScriptSerializer.DataContractJsonSerializer.Newtonsoft.Json这些写好的方法,需要自己写方法. (2)转化的类 ...

  4. 虚拟化x86的三种途径

    虚拟化x86的三种途径 作者:缪天翔链接:https://www.zhihu.com/question/20145026/answer/34527331 x86上的全系统虚拟化有三种主要的途径: 二进 ...

  5. Scrapy框架中的xpath选择

    不同于我们普通爬虫获取xpath,scrapy获得xpath对象获取他的值语法 一.xpath对象获取值 xpath对象..extract() 二.Scrapy框架独有的xpath取值方式 利用hre ...

  6. kaishi

    https://zjc.wtc.edu.cn/zs/2019/0623/c2937a54869/page.htm https://zjc.wtc.edu.cn/zs/2019/0614/c593a54 ...

  7. Spark ML协同过滤推荐算法

    一.简介 协同过滤算法[Collaborative Filtering Recommendation]算法是最经典.最常用的推荐算法.该算法通过分析用户兴趣,在用户群中找到指定用户的相似用户,综合这些 ...

  8. 排序算法的c++实现——计数排序

    任何比较排序算法的时间复杂度的上限为O(NlogN), 不存在比o(nlgN)更少的比较排序算法.如果想要在时间复杂度上超过O(NlogN)的时间复杂度,肯定需要加入其它条件.计数排序就加入了限制条件 ...

  9. git使用.gitignore文件忽略相关文件上传

    在使用git时,有些文件是不需要上传到仓库中的,比如idea/eclipse相关的文件,编译后的文件(target目录)等. 可以使用.gitignore文件进行配置.在git本地仓库创建.gitig ...

  10. 浅谈Python设计模式 -- 责任链模式

    声明:本系列文章主要参考<精通Python设计模式>一书,并且参考一些资料,结合自己的一些看法来总结而来. 之前在最开始就聊了Python设计模式有三种,其中关于创建型和结构型设计模式基本 ...