前言


Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。—-官方文档

如何理解响应式


为什么执行 this.message= 'json' 后视图为什么会更新呢?首先应该回答两个问题:

1、this.message修改数据,Vue内部是如何监听message数据的改变

2、当数据发生改变,Vue是如何知道要通知那些数据,界面发生刷新

问题一解决:

根据 Object.defineProperty来监听对象属性的改变
# 1.先创建一个Obj属性
# 相当于给 new Vue() 中的data设置属性
const obj = {
	name: 'Vistuous',
	message: 'Hello Vue.Js'
}

# 2.循环Obje
Object.keys[obj].forEach(key => {
	let value = obj[key]
	# 监听值的改变
	Object.defineProperty(obj, key, {
		set(newValue) {
			console.log(key + '发生了变化' )
			value = newValue
			# 通知订阅者 -> 看第二个解决
			dep.notify()
		},
		# 谁使用了, 就会进入 get
		get() {
			console.log(key + '对应的值: ' + value)
			return value
		}
	})
})

结果:
结果
我们会发现修改name值或者使用name值的时候, Object.defineProperty 会监听到, 那么第一个问题 修改Vue实例数据,vue内部是如何监听数据的改变? 已经解决了。
那么问题来了,Vue是如何知道要通知那些界面发生刷新? 也就是说:Vue是如何知道谁在使用?如何告诉它需要更新? 回到第二个问题。

第二个问题解决

使用发布者订阅者模式 来完成通知发生刷新
## 创建订阅者
class Watcher {
  constructor(name) {
    this.name = name
  }
  update() {
    console.log(this.name + '发生了update')
  }
}

# 创建发布者
class Dep {
	# 储存订阅者
	constructor() {
		this.subs[] 
	}
	# 添加订阅者信息
	addSubs(watcher) {
		this.subs.push(watcher)
	},
	# 循环所有订阅者, 通知他们需要更新
	notify() {
	   	this.subs.forEach(item => {
	    	item.update()
	    })
	}
}

# 使用
# 创建发布者
const dep = new Dep()
# 创建订阅者
const watcher1 = new Watcher('index')
const watcher2 = new Watcher('profile')
# 将订阅者传给发布者
dep.addSubs(watcher1)
dep.addSubs(watcher2)
// 通知订阅者
dep.notify()

合并使用结果打印:
在这里插入图片描述
会发现每当修改一个数据的时候,发布者模式会通知所有订阅者来进行更新。
并且我们已经实现了类似Vue响应式的原理,

Vue响应式图解

vue响应式.png