vue3学习-ref引用

模板引用

使用特殊的 refattribute

允许再特定的Dom或组件被挂在后，获取他的直接引用。

import { ref } form 'vue'
const input = ref(null)
<input ref="input"/>

注意：只可以在组件挂载后才能访问模板引用

#如果你需要侦听一个模板引用 ref 的变化，确保考虑到其值为 null 的情况
watchEffect(() => {
    if(input.value) {
        input.value.forcus()
    }else{}// 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）
})
onMounted(() => {
	console.log(input.value)
})

v-for 中的模板引用

const list = ref([])

ref 数组并不保证与源数组相同的顺序

函数模板引用

除了使用字符串值作名字，ref attribute 还可以绑定为一个函数，会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数

<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">

组件上的 ref

获得的值是组件实例

使用了 的组件是**默认私有**的：一个父组件无法访问到一个使用了 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露：

import { ref } from 'vue'
const a = 1,  b = ref(2)
defineExpose({a,b})

cons.value.a //1
cons.value.b // 2

当父组件通过模板引用获取到了该组件的实例时，得到的实例类型为 { a: number, b: number } (ref 都会自动解包，和一般的实例一样)。