vue响应系统的作用和实现一

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

副作用函数指的是会产生副作用的函数，副作用函数有很多种，以下举例三种：

        ①该函数里面改变了变量的值。

        ②变量发生改变之后，通过该函数影响到其他（变量、元素、属性等）。

        ③该函数的执行会直接或者间接影响其他函数的执行，比如某个函数修改了一个全局变量，其他函数也可以修改这个全局变量，那么该函数就产生了副作用。

2、响应式数据基本实现

        将副作用函数储存在桶里，当设置对象的时候，再将副作用函数取出执行。实现响应式数据的关键是拦截一个对象属性的读取和设置操作。

        在Vue2中，通过Object.defineProperty来实现这个操作，在Vue3中，是通过代理对象Proxy来实现。

//用Set类型来存储副作用
const bucket = new Set()

//原始数据
const data = { text:'hello,world' }
//proxy代理
const obj = new Proxy(data,{
    //拦截get操作
    get(target,key){
        //将副作用函数添加到桶中
        bucket.add(effect)
        //返回属性值，实现get本身的功能
        return target[key]
    },
    //拦截set操作
    set(target,key,newVal){
        //设置属性值，实现set本身的功能
        target[key] = newVal
        //把副作用函数从桶（bucket）中取出来,并执行
        bucket.forEach(fn=>fn())
        //返回true，表示上述函数正常执行，代表设置操作成功
        return true

    }
})

//测试一下

//副作用函数
function effect(){
    document.body.innerText = obj.text
}
effect()
setTimeout(()=>{
    obj.text = 'hello，vue'
},1000)

注意，这里的响应式数据是这个new出来的代理obj，不是原始数据data。

以上参考霍春阳老师的《Vue.js设计与实现》，有兴趣的朋友可以看一下原书，更加详细·-·