初识vue3响应式原理
响应系统是vue3中的重要组成部分
-
副作用函数
什么是副作用函数呢？
副作用函数是指能够产生副作用的函数；
function effect(){
document.body.innetText = 'hello'
}
以上代码将会改变页面的内容，但除了这个函数之外，其他任何函数都可以改变页面的内容，也就是说此函数的执行将会影响到其他函数的执行，我们就说effect函数的执行产生了副作用；
副作用很容易产生，例如一个函数修改了全局变量，也是产生了副作用；
-
响应式数据
当一个副作用函数读取了某个对象的属性；
function effect(){
document.body.innerText = obj.text
}
以上代码会将文本内容设置为 对象obj的text属性的值；
如果我们改变了对象obj的text属性的值，或者说text的值发生变化时，希望能够重新执行这个副作用函数；
obj.text = 'hello,world'
当改变text的值时，能够重新自动执行effect函数；那么obj就是一个响应式数据；
-
实现数据的响应式
如何才能将obj变成响应式数据呢？
想要在text属性改变时，重新执行副作用函数，那么就需要拦截这个对象的设置操作，那么怎么样可以拦截呢
在ES6中，我们可以使用代理对象 Proxy 来实现（vue2中使用的是Object.defineProperty）
const data = {
text:"vue"
}
const obj = new Proxy(data,{
get(target,key){
console.log(target,key);
bucket.add(effect)
return target[key]
},
set(target,key,newVal){
target[key] = newVal;
bucket.forEach(fn=>fn());
return true;
}
})
我们创建了一个Set类型的存储函数的桶bucket，定义obj为原始数据data的代理对象，接着设置了get，set的拦截函数，当读取obj属性时，就把effect函数存在bucket中，在设置obj属性时，就把副作用函数从bucket中取出来执行，这样我们就简单完成了响应式数据的实现；
