vue中的ref

wjs04062023-09-20 21:31

一，vue2的$refs与ref

理解：this.$refs是一个对象，他是当前组件使用ref注册过特性的所有dom元素和子组件的实例。

也就是通过ref来注册一个元素，通过this.$refs来访问注册的dom元素或子组件实例

用法：

1，作用在当前页的普通标签上，获取的是当前页面节点的dom元素，this.$refs.refName，

2，作用在子组件上，获取的是子组件对象，调用方式也是this.$refs.refName

3，与v-for一起使用，动态实现循环列表类的标签

注意：

this. $refs必须要在页面挂载完成之后才能调用，例如created阶段，这时候页面还没有挂载el，整个视图不可见，因此this.$ refs无法获取到dom，可以在mounted中实现
在v-if和v-show条件渲染之后调用可能获取不到。因为refs不是响应式的，他是作为渲染结果被创建的，因此在初始渲染的时候获取不到

示例：

html 复制代码

<div ref="scroll" class="list">
    <el-button type="primary" @click="getDom()"></el-button>
</div>

<script>
    getDom() {
        const dom = this.$refs.scroll;
    }
</script>

二，vue3的ref()

概念：

ref()是一个函数，他接受一个参数（普通的原始数据），并返回一个响应式的带有.value属性的ref对象。

示例：

javascript 复制代码

import {ref} from 'vue';

const a = ref(1);
console.log(a.value); // 1

说明：

如果在组件模板中使用ref，则需要在setup()钩子函数中声明ref

ref()与reactive()的区别：

ref()是将基本的值类型数据进行包装，转换成一个响应式的值；而reactive()是将引用类型的值转换成响应式的值。例如：ref(1) === reactive({ value: 1})