vue3响应式原理-reflect

proxy负责对某个数据进行增删改查的监听,不过vue3底层不是直接对target进行如下的简单操作。而是利用es6的window.reflect
vue3响应式原理-reflect_第1张图片

利用reflect取一个对象的属性

vue3响应式原理-reflect_第2张图片

利用reflect修改对象属性

vue3响应式原理-reflect_第3张图片
利用reflect删除对象的某个属性

vue3响应式原理-reflect_第4张图片

object上的一些属性,reflect也有

比如给object定义相同属性名,会导致代码单线程卡住,阻塞下面代码运行
vue3响应式原理-reflect_第5张图片
vue3响应式原理-reflect_第6张图片

如果是使用reflect

vue3响应式原理-reflect_第7张图片
vue3响应式原理-reflect_第8张图片

deflect会返回执行的结果

vue3响应式原理-reflect_第9张图片
vue3响应式原理-reflect_第10张图片

好处是,通过返回值就会知道成功还是失败。

对于vue3而言,底层使用reflect会比较健壮,不容易出现有个错误就导致程序阻塞。如果使用object:

虽然可以通过try catch
vue3响应式原理-reflect_第11张图片
vue3响应式原理-reflect_第12张图片
但是底层源码如果各种try catch就会显得不优雅。

如果使用reflect,当出现错误的时候,进行逻辑判断从而代码继续往下走

vue3响应式原理-reflect_第13张图片

vue3响应式原理-reflect_第14张图片

综述,vue3底层的对象响应式的雏形是这样的,利用proxy代理,利用reflect反射:

vue3响应式原理-reflect_第15张图片

vue3响应式原理-reflect_第16张图片
总结:

vue3响应式原理-reflect_第17张图片

你可能感兴趣的:(vue3,个人笔记/备忘录,html,html5,vue3)