vue组合api中ref

ref函数:

一、使用ref的步骤

1、从vue框架中导入ref函数。import { ref } from 'vue'；

2、在setup函数中调用ref函数并传入数据（简单类型或者复杂类型), const 响应式数据 =ref(初值) ；

3、把ref函数的结果添加到setup函数的返回对象中。

二、使用ref注意事项

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

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

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

4、ref函数也支持传入复杂类型，传入复杂类型，也会做响应式处理。

三、用ref函数获取实例对象

步骤1：导入ref函数 import { ref } from 'vue'

步骤2：在setup中， 使用ref函数传入null创建 ref对象 => const hRef = ref(null) 并添加到setup的返回对象中；

步骤3：模板中通过定义ref属性设置为步骤1中创建的ref对象名称建立关联 <h1 ref="hRef"></h1>

步骤4：使用。hRef.value