一,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不是响应式的,他是作为渲染结果被创建的,因此在初始渲染的时候获取不到
示例:
<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对象。
示例:
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})