首先我们需要明确，什么是响应式？`Vue`官方文档响应式的解释是：响应性是一种允许我们以声明式的方式去适应变化的编程范例，乍一看还挺难以理解，用通俗点的大白话来说：响应式就是在数据发生变化的时候执行某个或者某些回调，使页面发生更新，也就是数据驱动页面的更新。

proxy

在学习响应式原理之前，我们先铺垫一点proxy的知识，vue3通过proxy实现响应式原理，那么我们肯定需要清楚proxy的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let reactive = (target) => {
  return new Proxy(target, {
    get(target, key) {
      console.log(target, key);
    },
    set(target, key, value) {
      console.log(target, key, value, '被拦截了');
    }
  })
}

let obj = {
  name: "coderwei",
  age: 18
}
let o = reactive(obj)
o.name // { name: 'coderwei', age: 18 } name 
o.name = '123' // { name: 'coderwei', age: 18 } name 123 被拦截了

我们可以发现，用户在通过o.name获取name属性的值的时候，会被get方法拦截到，并且拿到用户访问的是哪个对象，哪个key，当用户通过o.name = '123'修改属性的值的时候，会被set方法拦截到，并且拿到目标对象、key、以及新值。

实现思路

首先我们需要明确vue3中响应式的表现，最起码知道他是怎么用的？我们在能考虑去实现

1
2
3
4
5
6
7
8
9
10
11
12
13
let obj = reactive({
    name:"coderwei",
    age:19
})
let nextAge
effect(()=>{
    nextAge = obj.age + 1
})
expect(nextAge).tobe(20)
// nextAge变量会变成20，  说明effect函数进来的一瞬间就被执行一次
obj.age++
expect(nextAge).tobe(21)
// 当obj.age发生变化的时候，需要重新回调一次effect的函数 来更新nextAge的值

两大点

  • 在用户