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

编程汇总 • 2025-03-03 18:11 • 阅读 14

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

我们需要弄懂两个问题:

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

合并使用结果打印：

会发现每当修改一个数据的时候，发布者模式会通知所有订阅者来进行更新。
Vue响应式图解

图片素材来源coderwhy老师 coderwhy老师简书

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

我们需要弄懂两个问题:

问题一解决:

Object.defineProperty 基本使用

第二个问题解决

相关推荐