proxy负责对某个数据进行增删改查的监听，不过vue3底层不是直接对target进行如下的简单操作。而是利用es6的window.reflect
在这里插入图片描述

利用reflect取一个对象的属性

在这里插入图片描述

利用reflect修改对象属性

在这里插入图片描述
利用reflect删除对象的某个属性

在这里插入图片描述

object上的一些属性，reflect也有

比如给object定义相同属性名，会导致代码单线程卡住，阻塞下面代码运行
在这里插入图片描述
在这里插入图片描述

如果是使用reflect

在这里插入图片描述
在这里插入图片描述

deflect会返回执行的结果

在这里插入图片描述
在这里插入图片描述

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

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

虽然可以通过try catch
在这里插入图片描述
在这里插入图片描述
但是底层源码如果各种try catch就会显得不优雅。

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

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述
总结：

在这里插入图片描述

# html # html5
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue