vue的双向数据绑定

vue的双向数据绑定

1. vue的双向数据绑定的原理
   – Object.defineProperty()
2. vue双向数据绑定的具体实现

1. vue的双向数据绑定的原理

1. Object.defineProperty() 是什么

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象
对象–属性，返回对象
有两个描述属性：
get: 读取name属性这个值触发的函数
set：设置name属性触发的函数

1. 数据劫持 + 发布者-订阅者模式
   数据劫持：

var Book = {}
var name = ''
Object.defineProperty(Book, 'name', {
	set: function(value) {
		name = value;
		console.log('设置属性的时候' + value)
	},
	get: function() {
		return '《' + name + '》'
	}
})
Book.name = ‘Vue权威指南’ // 设置属性的时候会触发set
console.log(Book.name)  // 读取属性的时候会触发get

双向数据绑定

1. view变化 data变化 ==》事件监听。类似input

2. data变化view变化 ==》向set内设置更新后的数据。因为设置属性的时候会触发

3. Observer 劫持监听 =》 设置一个监听器 Observer。属性变化，告诉订阅者watcher是否需要更新
   Watcher 订阅者 =》每一个Watcher都绑定一个更新函数，watcher收到属性变化的通知并执行相关的函数，从而更新视图
   Compile 解析器 =》扫描和解析节点的相关指令（v-model、v-on）如果节点存在v-model、v-on等指令，解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）