vue 双向数据绑定原理

博客地址:https://ainyi.com/8

采用defineProperty的两个方法get、set

示例

1 <!-- 表单 -->
2 <input type="text" id="input">
3 <!-- 展示 -->
4 <p id="desc"></p>
 1 let obj = {};
 2 let temp = {};//采用临时变量代理obj
 3 Object.defineProperty(obj,'name',{
 4     //获取obj的name属性会触发
 5     get(){ 
 6         return temp['name'];
 7     },
 8     //给obj的name属性赋值会触发
 9     set(val){ 
10         temp['name'] = val;//改变temp的结果
11         input.value = val;//将值赋值到输入框
12         desc.innerText = val; //将值显示到输入框下面
13         //obj.name = val; //死循环,不能采取这种方式赋值,采用temp代理方式赋值和取值
14     }
15 });
16 
17 //设置了id值不需要document.getElementById()
18 //调用上面的set方法,设置初始值
19 obj.name = "message";
20 //调用上面的get方法,获取属性值并放到输入框
21 input.value = obj.name;
22 
23 //输入框的变化时执行,这里不能使用箭头函数,因为箭头函数不绑定this,找的是上下文的this
24 input.addEventListener('input',function(){
25     //当值变化时会调用set方法
26     obj.name = this.value;
27 });

defineProperty扩展

 1 // Object.defineProperty(obj,'name',{
 2 //     configurable:false, //是否可删除
 3 //     writable:false, //是否可重新赋值
 4 //     enumerable:false,//是否可枚举,false不能for in循环和Object.keys(obj),
 5 //     value:1
 6 // });
 7 // Object.keys(obj)返回一个给定对象obj的所有可枚举属性的字符串数组,即obj的属性名数组
 8 
 9 // 若有:
10 let obj2 = {};
11 
12 // 一方面设置属性和值
13 obj2.name = 1;
14 // 等同于:(后三个属性的默认值都是true)
15 Object.defineProperty(obj2, "name", {
16     value : 1,
17     writable : true,
18     configurable : true,
19     enumerable : true
20 });
21 
22 // 另一方面设置属性和值
23 Object.defineProperty(obj2, "name", {
24     value : 1 
25 });
26 // 等同于:(后三个属性的默认值都是false)
27 Object.defineProperty(obj2, "name", {
28     value : 1,
29     writable : false,
30     configurable : false,
31     enumerable : false
32 });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Spark学习技巧

Java枚举(enum)七种常见的用法

DK1.5引入了新的类型——枚举。在 Java 中它虽然算个“小”功能,却给我的开发带来了“大”方便。 用法一:常量 在JDK1.5 之前,我们定义常量都是:...

28130
来自专栏java达人

Java 枚举7常见种用法

用法一:常量 在JDK1.5 之前,我们定义常量都是: public static fianl…. 。现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,...

26480
来自专栏公众号_薛勤的博客

详解JSOUP的Select选择器语法

可以使用Element.select(String selector) 和 Elements.select(String selector) 方法实现:

11120
来自专栏梦魇小栈

JQuery分析及实现part3之属性模块功能及实现

8930
来自专栏我的小碗汤

Go语言中数组和切片笔记

今天有位大佬问我一个关于切片很简单的一个问题,却把我难住了,所以是时候了解下切片的底层了。

10730
来自专栏Golang语言社区

Go语言编程中字符串切割方法小结

1.func Fields(s string) []string,这个函数的作用是按照1:n个空格来分割字符串最后返回的是 []string的切片 import...

45690
来自专栏Pythonista

golang之切片与排序

排序操作在sort包中,sort.Ints对整数进行排序,sort.Strings对字符串进行排序,sort.Float64对浮点数进行排序

8020
来自专栏LeetCode

LeetCode 832. Flipping an Image

Given a binary matrix A, we want to flip the image horizontally, then invert it,...

4000
来自专栏LEo的网络日志

go从已知列表中查找字符串

38070
来自专栏飞雪无情的博客

Go语言实战笔记(五)| Go 切片

切片也是一种数据结构,它和数组非常相似,因为他是围绕动态数组的概念设计的,可以按需自动改变大小,使用这种结构,可以更方便的管理和使用数据集合。

11840

扫码关注云+社区

领取腾讯云代金券