Vue模板引用、生命周期

1.ref模版引用  （获取页面的DOM标签元素）

           虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref 属性。

<标签元素  ref="ref变量名" /> <script setup>      //声明一个 ref 来存放DOM元素的引用,必须和模板里的 ref 同名      //定义一个响应式的变量，变量代表DOM元素的模板引用     let ref变量名=ref() </script>

ref 是一个特殊的属性，它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个 input 元素上，或在一个元素上初始化一个第三方库。 

访问模板引用 

       为了通过组合式 API 获得该模板引用，我们需要声明一个匹配模板 ref属性值的ref：

<script setup>     import { ref } from 'vue';     //声明一个 ref 来存放DOM元素的引用,必须和模板里的 ref 同名     let h2=ref()     //获取DOM元素     function getDOM(){         //1.原生js方式获取元素         let h1=document.getElementById('h1')         console.log(h1)         console.log('获取内容：'+h1.innerText)         //2.ref模版引用的方式获取元素         console.log(h2.value)         console.log('获取内容：'+h2.value.innerText)     }   </script> &