Vue3学习——reactive对比ref——关于.value

使用角度来说：ref定义的数据：操作数据需要.value，在js中；读取数据时，模板中不需要.valuereactive定义的数据：操作数据与读取数据：均不需要 .valueref定义的数据用.value的原因：在模板中引入ref的值时，Vue会自动帮助我们进行解包操作，所以我们并不需要在模板中通过 ref.value 的方式来使用；但是在 setup 函数内部，它依然是一个 ref引用，所

亦亦1

4700人浏览 · 2022-02-10 18:50:27

亦亦1 · 2022-02-10 18:50:27 发布

使用角度来说：

ref定义的数据：
操作数据需要.value，在js中；读取数据时，模板中不需要.value

reactive定义的数据：
操作数据与读取数据：均不需要 .value

在computed中，script里面读取数据也需要加.value

ref定义的数据用.value的原因：

在模板中引入ref的值时，Vue会自动帮助我们进行解包操作，所以我们并不需要在模板中通过 ref.value 的方式来使用；

但是在 setup 函数内部，它依然是一个 ref引用，所以对其进行操作时，我们依然需要使用 ref.value的方式

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}$/, //不连续的两位字母// /^