Vue响应式原理基本理解实现[通俗易懂]

全栈程序员站长

发布于 2022-08-23 12:13:45

3640

发布于 2022-08-23 12:13:45

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

注意: 不要认为数据发生改变,界面跟着更新, 是理所当然的.

我们需要弄懂两个问题:

1. 修改Vue实例数据，vue内部是如何监听数据的改变？ 2. 当数据发生改变，Vue是如何知道要通知那些界面发生刷新？

问题一解决:

根据 Object.defineProperty来监听对象属性的改变

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()

合并使用结果打印：