肆. 响应式系统 作用 实现

1 响应式数据与副作用函数

副作用函数指会产生副作用的函数
什么是响应式数据？
在一个副作用函数中读取了某个对象的属性

const obj = {text:'hello world'}
function effect(){
	//effect函数的执行会读取 obj.text
	document.body.innerText = obj.text
}

副作用函数effect中读取了obj.text的值，当obj.text的值发生变化时，我们希望副作用函数effect会重新执行 如果能实现这个目标，那么对象obj就是响应式数据 怎么实现？

obj.text = 'hello vue'

2 响应式数据的基本实现
通过观察，如何让obj变成响应式数据

• 当副作用函数执行的时候，会触发字段obj.text的读取操作
• 当修改obj.text的值时，会触发obj.text的设置操作

所以可以拦截一个对象的读取和设置操作，当读取obj.text，把副作用函数effect收集到桶里，当设置obj.text时，再把副作用函数effect从桶中取出执行 可用 ES6的代理对象Proxy实现，get时候跟踪把副作用函数存储起来，set的时候触发把副作用函数取出执行