Vue3访问模板引用

        1.什么是组件挂载

        2.组件挂载前执行了什么

        3.分析组件挂载前执行钩子函数于组件挂载的作用。

        Vue3中,可以创建一个空的ref，用来装对模板中DOM元素的引用。

<template>

        <h2 ref="title2">北京</h2>

        <button @click="showDom">点我再console中show出'北京'的Dom元素</button>       <!--2-->

</template>

<script setup lang="ts">

        let title2 =ref()

        console.log(title2.value)        // 1

        function showDom(){                

                console.log(title2.value)

        }

</script>

<style scoped >...</style>

1的输出结果是undefined,即已定义但未初始化(赋值)

点击按钮后输出结果是：<h2 data-v-4cadc14e>北京</h2>

为什么1的执行时，title2的值时undefined呢

在官方文档中搜索【访问模板引用】可以看到

组件挂载之前会执行许多钩子函数比如我们熟知的beforeCreate...其中，Vue3的setup也是一个特殊的钩子函数setup甚至在生命周期中比beforeCreate更先执行。

1在setup中，也就是说1的执行时在组件挂载之前。

那么是组件挂载，

        组件挂载，简单说就是将组件渲染，并且构造DOM(文本对象模型)元素然后塞入页面的过程

比如说<h2 ref="title2">北京</h2>

要先执行了钩子函数，也就是比如setup中的代码，

然后，才会知道木板上的ref="title2"是什么，

才能将模板转换成相应的DOM元素，

转换成DOM元素，经过一些内部逻辑，更新成最终在页面上解析的DOM元素。

这样以来DOM元素才叫生成了。

元素生成后ref中的title2才有引用，引用中的DOM元素才能被访问到

大致逻辑是这样，如果有误请指点~