Vue3/ Vue3组合式API(reactive 函数) 、 Vue3组合式API(ref 函数)

一. Vue3组合式API(reactive 函数)

语法:

const 代理对象 = reactive(源对象)

1.state 需要有返回值 只有返回的值才能在模板中使用

2.默认普通的数据 不是响应式的

作用:用来定义一个对象类型响应式数据

概述: 内部基于 es6 的 proxy实现 通过代理对象操作源对象内部数据进行操作

注意: reactive定义的响应式数据是 "深层次的"

二. Vue3组合式API(ref 函数)

语法:

//定义

const 变量 = ref(值)

// 操作数据

变量.value

说明： reactive处理的数据 必须是复杂类型 如果是简单类型无法处理成响应式 所以有ref函数

作用: 对传入的数据 ， 包裹一层对象 转换成响应式

1. ref函数接收一个值 返回一个ref响应式对象 有唯一的属性value

2. 在 setup函数中 通过ref对象的value 属性 可以访问到值

3. 在模板中 ref会自动解套 不需要额外的 .value

4. ref函数支持传入负责数据类型 传入负责数据类型 也会做响应式处理