Vue3中使用模板引用

主要来源于官方文档

普通引用

<script setup>
import { ref, onMounted } from "vue";
const root = ref(null);

onMounted(() => {
    // DOM 元素将在初始渲染后分配给 ref
    console.log(root.value); // <div>This is a root element</div>
});
</script>

<template>
    <div ref="root">This is a root element</div>
</template>

这里将 HTML 中的元素和 js 中的元素关联起来，然后可以通过element.value来获取到网页元素。

注意，必须等到mount阶段，才能获取到 HTML 中的元素，所以这里用了onMounted()。

循环引用

<script setup>
import { ref, reactive, onBeforeUpdate, onMounted } from "vue";
const list = reactive([1, 2, 3]);
const divs = ref([]);

// 确保在每次更新之前重置ref
onBeforeUpdate(() => {
    divs.value = [];
});

onMounted(() => {
    // DOM 元素将在初始渲染后分配给 ref
    console.log(divs.value); // {0: div, 1: div, 2: div}
});
</script>

<template>
    <div
        v-for="(item, i) in list"
        :ref="
            (el) => {
                if (el) divs[i] = el;
            }
        "
    >
        {{ item }}
    </div>
</template>

循环的引用自然也是用一个ref数组去接收。但是，需要手动配置onBeforeUpdate，使得更新循环时候，同步更新接收的ref数组。

侦听模板引用

<script setup>
import { ref, watchEffect } from "vue";
const root = ref(null);

watchEffect(
    () => {
        console.log(root.value); // => <div>This is a root element</div>
    },
    {
        flush: "post",
    }
);
</script>

<template>
    <div ref="root">This is a root element</div>
</template>

只需要注意使用flush: 'post'即可监听模板引用。

也可以直接用watchPostEffect，它就是watchEffect 的别名，带有 flush: 'post' 选项。