一步一步分析将数据响应式实现出来

写在前面

vue2 的数据响应式已经非常成熟且过时了，但是相信很多人还是对原理的东西一知半解，甚至还是不知道他究竟是怎么实现的，今天我们就试着一步一步分析看看响应式需要解决哪些问题，具体的问题难点是什么？

数据响应式

数据响应式就做了两件事，第一就是数据变化通知函数，第二就是函数进行视图也就是页面的变化 所以数据响应式就是数据变化引起视图更新

实现一个数据响应式需要具备的条件

• 需要一个方法设置数据变化的时候映射到页面
• 需要一个方法数据变化要可以及时调对应的方法

难点是什么？

• 怎么知道数据变化了？
• 数据变化之后怎么知道是哪个方法该更新？

实现第一件事

代码语言：javascript复制

const data = { name: 'tom', age: 16 }

// TODO: 设置数据变化映射到页面
function setName() {
	const name = document.getElementById('name')
	name.innerHTML = data.name
}

function setAge() {
	const age = document.getElementById('age')
	age.innerHTML = data.age
}

实现第二件事

代码语言：javascript复制

setName()
setAge()

// TODO: 两秒之后继续执行 测试页面更新的情况
setTimeout(() => {
	data.age = 22
	data.name = "JIM"
	setName()
	setAge()
}, 2000)

这两件事单独做都很简单，甚至没有任何的技术难度，那么问题就是我们怎么知道数据变化了？

解决怎么知道数据变化了的问题

Object.defineProperty 这玩意不就可以监测到吗？这个东西不仅仅可以给对象设置新的属性和设置属性的一些属性，同时他也可以知道对象的变化，变化之后调用一下方法不就好了吗？有方法了事情就好办了，直接开整

代码语言：javascript复制

let __FV = data.name
Object.defineProperty(data, 'name', {
	get: function () {
		console.log('


	

测试 对象 函数 数据 响应式 


	




	
 0 人点赞