vue双向绑定原理

2023-01-11 20:48:20 浏览数 (1)

官方话

vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持,在数据变化时发布消息给订阅者,触发相应的监听回调。也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变。

Object.defineProperty()方法

1、Object.defineProperty(obj, prop, descriptor) ,这个语法内有三个参数,分别为 obj (要定义其上属性的对象); prop (要定义或修改的属性); descriptor (具体的改变方法) 2、简单地说,就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法。当给这个属性赋值时,就调用了它里面的set方法;

示例

代码语言:javascript复制
1
2var obj = {}
3Object.defineProperty(obj,"prototypeName",{
4	get: function() { 
5		console.log("调用了get") 
6	},
7	set: function(newValue) {
8		console.log("调用了set,新值是" newValue)  
9	}
10})
11
12obj.prototypeName    // 调用了get
13obj.prototypeName = "hello"   // 调用了set,新值是hello
14

0 人点赞