Vue3操作DOM元素

        在原生的网页中通过document.getById()可以直接获取到dom元素，在Vue中主要是通过标签的ref属性给标签起名字。

操作DOM

在Vue3中操作DOM的方式如下：

1. 通过ref属性给标签起名字

2. 定义一个与标签名一样的变量，通过ref()获取虚拟DOM节点

3. 在元素挂载之后访问

<template>
    <div ref="hello">hello,Vue3!</div>
</template>
​
<script setup>
    import { ref } from 'vue';
    //  变量名必须与标签的ref属性值相同
    const hello = ref()
</script>

此时元素还没挂载，不能直接使用DOM。只有元素挂载后才能使用（如在onMounted()声明周期中），并且要通过.value属性拿到DOM的信息

引发深思

为什么这里引用DOM元素的变量名要与标签的ref属性值相同？这两者是怎么关联起来的？

将script标签中的setup去掉，代码等效于下面这种形式：

<template>
    <div ref="hello">hello,Vue3!</div>
</template>
​
<script>
    import { ref } from 'vue';
    export default {
        setup() {
            //  定义引用对象
            const hello = ref()
            //  返回引用对象
            return {
                hello
            }
        }
    }
</script>

这样看来，hello引用的对象与DOM的关联流程大致如下：

1. setup定义ref对象（此时引用对象的value属性为空，用于存放真实DOM） ==> ( const hello = ref( ) )

2. 在setup函数中返回引用对象 ==>（ return { hello } ）

3. Vue框架拿到引用对象，将引用对象的value属性存放真实DOM ==> （ hello.value = DOM对象 ）

于是我变量名字进行了更改，但是返回的还是hello属性，代码如下：

<template>
    <div ref="hello">hello,Vue3!</div>
</template>
​
<script>
    import { ref } from 'vue';
    export default {
        setup() {
            //  定义引用对象
            const vue3 = ref()
            //  返回引用对象
            return {
                hello: vue3
            }
        }
    }
</script>

用这种方式仍然能获取到DOM，得出最终结论：

标签ref名字与变量名是通过setup函数返回对象的属性名进行关联的，即：

① 通过返回对象的属性找到真实DOM

② 通过返回对象的属性找到引用对象

③ 将真实DOM存入引用对象（定义引用对象的.value属性= 真实DOM）