Vue3 Composition API设置变量：是否需使用.value？

直接给你明确三种写法的对错：

• active = true; 错误：你用const声明了active，常量无法被重新赋值；就算换成let，这么写也会直接覆盖掉原来的ref响应式包装对象，彻底丢失响应式，绝对不能这么用。
• active.value = true; 正确：用ref()创建的变量是一个响应式包装对象，必须通过.value才能修改内部的实际值，这是<script setup>里修改ref变量的标准操作，能保持响应式正常工作。
• this.active = true; 错误：<script setup>语法糖里不存在this上下文，this指向undefined，这么写会直接抛出错误，完全无效。

额外提一句：在模板里使用ref变量的时候不用加.value，Vue会自动帮你解包，比如写<div v-show="active">...</div>就可以。

内容的提问来源于stack exchange，提问作者panthro