>[success] # setup 中使用$ref 1. 我们只需要定义一个`ref`对象，绑定到**元素或者组件**的`ref`属性上即可 >[danger] ##### 案例 ~~~ <template> <div ref="test">测试</div> </template> <script> import { ref, onMounted } from 'vue' export default { name: 'App', setup() { const test = ref(null) onMounted(() => { console.log(test.value) }) return { test, } }, } </script> <style></style> ~~~  * 打印结果  >[danger] ##### 注意点 1. 只可以在**组件挂载后才能访问模板引用**， `setup `的生命周期早于`create`之前在setup函数初始化时候获取不到的获取方式可以在 `onMounted` 函数，`watchEffect` 函数，`watch` 函数，`nextTick` 函数，`渲染后`触发自定义函数 * [案例](https://sfc.vuejs.org/#eNqVVU1P1EAY/iuTXrYbyzZ63ADRqAcPxkSNF+uhdKdQbDvNdLpINpsYjIKKEBODxngwBjHRoGgQRED+DF3qib/gO9NOd5ZlAZtNp/POM+/H835sS7sURbVmgrW6NsxwEPk2w6NWiNCwF0YJQxS7I5YWkCRkuHETu5Zm9h9P2cyZOPHwqutihw2ChPgBu+059wedO0nMSKCejiWMkRBddHy4BohxzK7xC1dIYGkCYrFsYTNdXBJwM8fDwbCpRAnb2KFexMQNL4gIZajFjRrC6/yd+44M6aVBwus5H23kUhKgCvBX4RrwA6GhgV078UETt4DgiTFLIr3KBbCzGHJIGDPUZRWNcKN6mPh+tRcjqT0FUfI7GKeQPBhUMt0HAVC+lNHrenVkNA+JP6aJGkBG9vN5+nCnlHZjrDVtP8H5G7RfOF9g2lK/NCACEspl8PklQw/x1B3bN4jfgOUMxj0IQFypQvR8Pc66NFuuCqHgBRoZLfJWqER6L+O5Tplc+RzvUK/2E0jhniHsx7hXLWjtrC53Xm9ke2867z535mey3d3DnfnO3BLI08ePDtbfp5s/DrYXsw9f0he/xOnc/p/n6crM34dvs71Z1ByCEDoLn9K5jcOdp4o5+dmXD1k4Z8q3UmWnJhzag0HluUnoMA+6WWlivarEfbylslQH2pFQCu1HQ5XJblUaXaGstqOiMlnKgRKmIi1dUmTqZJIM5x9igdewWQ4hzdDyKTQU2FFtMiYhzGXht1UcxJZWl5FYGgwevre0CcaiuG6asevwaT4Z1wgdN+GrRiFSL8A1HAdDY5RMxZiCYksrXBQ6TBA2MR2iOGxgiulJOo9A+/QWQbUhlMsTnt8A4PH/L0dHuFiL4Y0OZrbS2W3UahHqjXuh7bcFW/89yO0GCf1pZMAX1FgTnz6xOSkRJRB5WS/Sh64EITYd4fqNsUmojDLZFiv01Hmn6K1uJ8mMF1AceKx+t+JM2OE4rtwrpPm/hLBttDgEZlOLd8jRAYW6LSNI62kW0S5Frzskmkb7e187r7bgGwoBRkW69iT9tpPNrqfL37P1j+nWRjr7+2BhLVtdSV8+U/UIT2ri3rlzXGsO4aVxCzNEIkxt4QT87uNpVBHQCnJtz8eNOmI2heJHXlzmoZaXh3x4jLpkwThfsiX4Kjf93atkJPdRbpW2g2YU9SQFJ/Rc+x9jLxM8)  ~~~ html <template> <input ref="mountedRef"/> <input ref="watchRef"/> <input ref="watchEffectRef"/> <input ref="nextTickRef"/> <input ref="customRef"/> <button @click="getInputDom"> 获取 </button> </template> <script> import { ref,watch,watchEffect ,nextTick,onMounted} from 'vue' export default { setup() { const mountedRef = ref(null) const watchRef = ref(null) const watchEffectRef = ref(null) const nextTickRef = ref(null) const customRef = ref(null) onMounted(()=>{ // dom 赋值 mountedRef.value.value = 21 }) watch(()=>watchRef.value,(newVal,oldVal)=>{ // dom 赋值 if(newVal) newVal.value = 21 }) watchEffect(() => { if (watchEffectRef.value) { // dom 赋值 watchEffectRef.value.value = 21 } else { // 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制） } }) nextTick(()=>{ // dom 赋值 nextTickRef.value.value = 21 }) function getInputDom(){ // dom 赋值 customRef.value.value = 21 } return { mountedRef, watchRef, watchEffectRef, nextTickRef, customRef, getInputDom } } } </script> ~~~ >[danger] ##### 细节参考 [组件实例 -- $ 属性](https://www.kancloud.cn/cyyspring/vue3/3106148) >[info] ##### 官网 [# 模板引用](https://cn.vuejs.org/guide/essentials/template-refs.html)