vue 的动态数据绑定, 是利用 ES5 的对象的
Object.defineProperty() 的方法 [定义属性], 中的 get 和 set 方法
一, defineProperty 基本用法
1, 基本写法:
- var person= {};
- Object.defineProperty(person, "name", {
- value: '张三',
- })
- console.log(person.name); // 打印: 张三
2, 参数
一, 参数
第一个参数: 要设置的目标对象(必填)
第二个参数: 需要定义的属性或方法的名称(必填)
第三个参数: 目标属性所拥有的特性, 对象.(descriptor)(必填)
二, 关于 descriptor 的属性:
value: 属性的值
writable: 是否可写 -- 如果为 false, 属性的值就不能被重写, 只能为只读了
configurable: 总开关, 一旦为 false, 就不能再设置他的(value,writable,configurable)
enumerable: 是否可枚举(是否能在 for...in 循环中遍历出来或在 Object.keys 中列举出来)
set: 改变值
get: 获取值
3,descriptor 参数的基本用法
1, 默认值
writable,configurable,enumerable: 默认值为 false
2,configurable
configurable: 第一次设置 false 后,
再次通过 defineProperty 设置其他值 (value,writable,configurable) 就会报错.
- var person= {};
- Object.defineProperty(person, "name", {
- value: '张三',
- configurable:false
- })
- Object.defineProperty(person, "name", {
- value: '李四',
- })
报错. PNG
3,writable
writable: 设置 false 后, 变为只读.
- var person= {};
- Object.defineProperty(person, "name", {
- value: '张三',
- configurable:false
- })
- console.log(person.name); // 打印: 张三
- person.name = "李四"; // 没有错误抛出(在严格模式下会抛出, 即使之前已经有相同的值)
- console.log(person.name) // 打印: 张三, 赋值不起作用.
- 4,enumerable
enumerable: 是否可枚举
- (是否能在 for...in 循环中遍历出来或在 Object.keys 中列举出来)
- var person = {};
- Object.defineProperty(person, "name", {
- value : '张三',
- enumerable: true
- }
- );
- console.log(Object.keys(person)); // true: 打印 ["name"]; false: 打印 []
- 5,get,set
1,set : 更新数据; set: 获取数据
2, 在 descriptor 中不能同时设置访问器 (get 和 set) 和 wriable 或 value, 否则会错,
就是说想用 get 和 set, 就不能用 writable 或 value 中的任何一个.
3, 简单来说, 赋值或者取值的时候会分别触发 set 和 get 对应的函数.
- var person= {};
- var temp = [];
- Object.defineProperty(person, 'name', {
- set: function(newVal) {
- temp['name'] = newVal;
- console.log('为 person 设置新的姓名:' + newVal);
- },
- get: function() {
- var _name = temp['name'] || '默认姓名';
- console.log('获取 person 的姓名:' + _name);
- return _name;
- }
- });
- person.name = '张三'; // 打印 获取 person 的姓名: 张三
- console.log(person.name) // 打印 获取 person 的姓名: 张三(如果不设置 name, 这里会打印'默认姓名')
4,get ,set 动态绑定数据的例子:
- <!DOCTYPE html>
- <HTML>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- </head>
- <body>
- <input type="text" id="changeDemo">
- <p id="getData">
- </p>
- <script>
- var obj = {};
- var dataArr = [];
- // 触发 obj 对象 set 和 get 方法的时候, 趁机来输出或修改 dataArr 数组的内容
- Object.defineProperty(obj, 'name', {
- // 改变值
- set: function(val) {
- dataArr['name'] = val;
- },
- // 获取值
- get: function() {
- return dataArr['name'];
- }
- }) var changeDemo = document.querySelector('#changeDemo');
- var getData = document.querySelector('#getData');
- /*
- keyup 事件:
- 1, 拿到 input value 的值, 赋给 obj;
- 赋值时会触发 obj 的 set 方法: 改变数组对应的下标值
- 2, 将数组的值 在页面动态展示
- */
- changeDemo.onkeyup = function() {
- obj['name'] = changeDemo.value; // 1
- getData.innerHTML = dataArr['name']; // 2
- console.log(dataArr)
- }
- </script>
- </body>
- </HTML>
参考链接:
https://www.cnblogs.com/lvmylife/p/7474374.html
来源: http://www.jianshu.com/p/5b1190b1580f