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