1回答

好帮手慕久久

2021-12-24

同学你好，响应式原理比较难理解，涉及到了框架底层实现，对于同学来讲，了解大概过程就行。响应式原理，简单来讲，就是能监听、拦截到用户对数据的获取、修改、删除等操作；假设能监听到用户修改数据这个操作（修改数据，会触发一个函数--》监听函数），那么就可以在监听函数中，添加其他操作，比如更新页面；此时就实现了用户修改数据，页面对应更新这个响应式操作。

在vue3中，如果想让数据变成响应式，可以将数据data使用reactive方法包裹:

在reactive方法内部，会判断数据data是不是对象或者数组，如果不是则没必要处理成响应式，直接返回就行（响应式一般是针对数组和对象）：

如果是数组或对象，则使用Proxy包裹数据，生成代理对象：

此时操作数据，就会触发proxy代理中的get方法、set方法、deleteProperty方法等（监听）：

在获取数据时，会使用Reflect.get方法获取到对应的属性值：

由于属性值可能依旧是数组或者对象，那么就需要调用reactive方法，将其包裹成响应式的，即不论获取那一层数据，都能得到响应式的结果，这样就实现了深度响应式：

祝学习愉快！

0