[TOC] # 1. ref 創建響應式數據 * `ref`是一個函數，返回的是一個`Ref`對象。 * 作用：用來定義一個響應式的數據。 * 一般用來定義一個基本類型的響應式數據，如果想要定義一個對象類型的響應式數據可以使用函數`reactive`。 ```html <template> <!-- 6. 在模板中調用count的值，直接調用count即可，不能調用count.value --> <h1>{{ count }}</h1> <button @click="updateCount">更新count</button> </template> <script lang="ts"> // 1. 引入 ref 函數 import { defineComponent, ref } from "vue"; export default defineComponent({ setup() { // 2. 調用 ref 函數定義一個響應數據 const count = ref(0); // 3. 定義一個更新count屬性的方法 function updateCount() { count.value++; // 4. 在js代碼中以 count.value 調用來獲取count的值 console.log(count.value); } return { // 5. 將他們放置在setup的返回對象中 count, updateCount, }; }, }); </script> ```  <br/> # 2. ref 獲取頁面元素 `ref`函數可以獲取頁面中已經加載完畢的元素。 ```html <template> <!-- 1. 在標簽中使用 ref 屬性綁定一個數據 --> <input type="text" id="demo" ref="inputRef" /> </template> <script lang="ts"> import { defineComponent, onMounted, ref } from "vue"; export default defineComponent({ setup() { //2. 調用ref創建初始值為null的響應數據 const inputRef = ref < HTMLElement | null > (null); onMounted(() => { //3. 在生命周期函數onMounted頁面已經渲染好了，可以在這里拿到頁面的元素 console.log(inputRef.value); //<input type="text" id="demo"> //表示標簽存在時，就讓該標簽自動獲取焦點 inputRef.value && inputRef.value.focus(); }); return { inputRef, }; }, }); </script> ```