vue3响应式原理 简单好理解 不罗嗦 你必须知道

响应式也就是数据发生了变化视图也随之更新 这其中包含三个步骤 

1 监听对象 2 得到这个对象的信息 3 这个对象发生了什么变化 

想象一个场景 这是一年级的班级 里面有10个同学 现在你就是他们的代理班主任了 我要随时向你要每位同学的信息以及他们发生了信息变化也要告诉我

// 定义个班级和里面的学生
let class = {
    student1 : '小王',
    student2 : '小红',
    student3 : '小明',
    student4 : '舒先生',
    student5 : '小郑',
    student6 : '小李',
    student7 : '小光',
    student8 : '小和',
    student9 : '小伟',
    student10 : '小兰',
}

接下来我们通过proxy代理将班级托付给你了 

// 将班级托付给你

let goodBoy = new Proxy (class, {
    get(target,property) { //当我们页面渲染使用ref包裹的数据 就是通过get获取的
    // target就是class  可以当作student property就是里面的谁谁谁 比如student
    return target[property] //返回 class.student
 }
})

亲爱的班主任 请告诉我你们班第2个学生叫什么名字 他昨天乱扔垃圾 我要在黑板(页面)上写上他的名字（使用这个数据）

//获取班级里面学生的信息就会触发get方法
console.log(goodBoy.student2）// 此时返回值是小红 黑板上就写上了小红的姓名 
// 但是为了女同学的面子 你这个代理班主任决定通过set方法将小红的姓名换成一个假名字

到这里 已经实现代理和获取代理对象 接下来修改姓名 然后调用set方法 将student2的学生姓名改变 这样黑板上写的姓名也会发生变化

// 数据发生变化改变黑板的姓名

goodBoy.student2 = '爱情公寓张伟'

//数据发生了变化 proxy的set要开始干活了 我们来看看proxy内部set是如果工作的

let goodBoy = new Proxy (class, {

    get(target,property) {

    return target[property]
 }，
    
    set(target,property,newValue){
    
    targer[property]=newValue 
    //这一步就像是在说 class班级里面的小红的名字等于爱情公寓张伟
}
})

到这里 响应式原理已讲完 希望大家能希望 明天讲闭包 喜欢的可以关注哦