>[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] ##### 細節參考 [組件實例 -- $ 屬性](http://www.hmoore.net/cyyspring/vue3/3106148) >[info] ##### 官網 [# 模板引用](https://cn.vuejs.org/guide/essentials/template-refs.html)