Vue 3(3) ref 与 reactive 的使用详解

一、背景说明

Vue 3 引入了 Composition API,大大提升了逻辑复用与组织能力。在这个新模式中,最常用的两个响应式工具就是:

  • ref():用于基本类型或单值变量

  • reactive():用于对象、数组等复合类型


二、示例代码

以下是一个完整的模块化 Vue 页面,展示了 refreactive 的基本用法:




  
  
  Vue 模块化开发示例


  

{{ message }}

{{ web.title }}

{{ web.url }}

{{ number }}


三、ref()reactive() 有什么区别?

特性 ref() reactive()
用于类型 基本类型(数字、字符串、布尔、数组等) 对象(包括嵌套对象)
访问值 需通过 .value 访问/修改 直接通过属性名访问/修改
响应式检测 自动包裹基本类型 深层次响应式(包括嵌套属性)
模板中使用 Vue 会自动解包,无需 .value 直接用即可
常见用途 计数器、布尔标记、单个字段、数组 表单数据、配置对象、多个字段组合的数据

四、为什么模板中 number 不需要 .value

因为 Vue 模板会自动解包 ref 对象,你在模板中写的是:

{{ number }}

但其实等价于:

{{ number.value }}

你可能感兴趣的:(Vue3,vue.js,javascript,前端,前端框架,ecmascript)