Vue的學習 —— ＜vue響應式基礎＞

前言

正文

單文件組件

什么是單文件組件

單文件組件使用方法

數據綁定

什么是數據綁定

數據綁定的使用方法

響應式數據綁定

響應式數據綁定的使用方法

ref() 函數

reactive()函數

toRef()函數

toRefs()函數

案例練習

前言

Vue.js 以其高效的數據綁定和視圖更新機制廣受開發者喜愛。這一特性主要依賴于其獨特的響應式系統設計，它能夠實時監測數據變化并自動驅動相應的視圖更新。簡單來說，就是當數據發生變化時，依賴該數據的視圖會自動進行更新。這種“響應”是通過在初始化階段對數據對象屬性進行深度觀測和轉換來實現的。

正文

單文件組件

什么是單文件組件

在第二章中，我們使用Vite創建了一個Vue項目，并且注意到目錄結構中包含了一些擴展名為.vue的文件。這些.vue文件實際上是用來定義Vue的單文件組件。在Vue中，單文件組件是一種特殊的文件格式，用于構建用戶界面。一個.vue文件可以看作是一個獨立的組件單元，它包含了組件的模板、腳本和樣式。這種格式使得組件的代碼更加清晰和易于維護。在每個.vue文件中，你可以編寫HTML結構作為模板部分，JavaScript代碼作為腳本部分，以及CSS樣式作為樣式部分。

通過使用單文件組件，可以將組件的邏輯、結構和樣式封裝在一起，使得組件的復用和組織更加方便。這有助于提高代碼的可讀性和可維護性，以及加快開發速度。

每個單文件組件由模板、樣式和邏輯3個部分構成：

模板：模板用于搭建當前組件的DOM結構，其代碼寫在<template>標簽中
樣式：樣式是指通過CSS代碼為當前組件設置樣式，其代碼寫在<style>標簽中
邏輯：邏輯是指通過JavaScript代碼處理組件的數據與業務，其代碼寫在<script>標簽中

下面是一個單文件組件的代碼結構：

<template>
<!-- 此處編寫組件的結構,HTML代碼 -->
</template>
<script>
/* 此處編寫組件的JavaScript代碼 */
</script>
<style>
/* 此處編寫組件的樣式 */
</style>

單文件組件使用方法

下面演示如何使用單文件組件：

在D:\webProject目錄下創建Demo02文件夾，在cmd命令行中使用Vite創建一個名為vue-demo項目用于存放本案例的演示代碼
項目創建完成后，執行如下命令進入項目目錄并啟動項目：
```
cd D:\webProject\Demo02\vue-demo
yarn -i 
yarn dev
```
使用VS Code編輯器打開D:\webProject\Demo02\vue-demo項目目錄
將項目目錄下src\style.css文件中的樣式代碼全部刪除，從而避免項目創建時自帶的樣式代碼影響本案例的實現效果

創建src\components\SingleFileComponent.vue文件，該文件是名為singleFileComponent的單文件組件，并寫入如下代碼：

<template><div id="singleFileComponent">我是一個單文件組件</div>
</template>
<style>
#singleFileComponent {font-size: 22px;font-weight: bold;
}
</style>

修改src\main.js文件，切換頁面中顯示的組件并取消在main.js文件中引入第四步刪除的樣式文件
```
// import './style.css' 刪除這一行
import App from './components/Demo.vue'
```
保存上述代碼后，在瀏覽器中訪問http://127.0.0.1:5173/，SingleFileComponent組件的頁面效果如下圖所示

數據綁定

什么是數據綁定

Vue通過數據綁定實現了數據與頁面相分離，從而實現了數據驅動視圖的效果。即將頁面中的數據分離出來，放到組件的<script>標簽中，通過程序操作數據，并且當數據改變時，頁面會自動發生改變。

數據綁定分為定義數據和輸出數據：

定義數據：由于數據和頁面是分離的，在實現數據顯示之前，需要先在<script>標簽中定義組件所需的數據，偽代碼如下：
```
<script>
export default {setup() {return {數據名: 數據值,……}}
}
</script>
```

輸出數據：Vue為開發者提供了Mustache語法（又稱為雙大括號語法），將數據輸出到頁面中，偽代碼如下：

<template><div>{{ 數據名 }}<!-- 在Mustache語法中還可以將表達式的值作為輸出內容。表達式的值可以是字符串、數字等類型，代碼如下 -->{{ 數據名 === '張' ? '張先生' : 數據名}}</div>
</template>

為了讓代碼更簡潔，Vue 3提供了setup語法糖（Syntactic Sugar），使用它可以簡化上述語法，提高開發效率，使用setup語法糖來定義數據的語法格式如下：

<script setup>
const 數據名 = 數據值
</script>

數據綁定的使用方法

下面演示數據綁定的使用方法：

創建src\components\DataBind.vue文件用于存放演示代碼
?定義message數據，并在模板中輸出，DataBind.vue文件代碼如下

<template><!-- 輸出數據 -->{{ message }}
</template>
<script setup>
// 定義數據
const message = "操千曲而后曉聲，觀千劍而后識器"
</script>
<style>
</style>

3. 修改src\main.js文件，切換頁面中顯示的組件

import App from './components/DataBind.vue'

4. 保存代碼，使用瀏覽器訪問http://127.0.0.1:5173/，最終效果如下圖所示：

響應式數據綁定

響應式數據綁定是Vue開發中一種重要的技術，用于實現頁面數據的實時更新。當數據發生變化時，頁面能夠自動更新，而不需要手動重新渲染，如果想要實現頁面中數據的更新，則需要進行響應式數據綁定，也就是將數據定義成響應式數據。下面是關于響應式數據綁定的詳細解釋：

數據與視圖的同步：在Vue項目開發中，通常會有數據和視圖兩個部分。數據存儲在變量中，而視圖是數據的呈現。響應式數據綁定能夠確保當數據發生變化時，視圖會自動更新。
依賴關系：要實現數據與視圖的同步，我們需要明確數據與視圖之間的依賴關系。當數據發生變化時，視圖需要重新渲染，反之，當視圖因為某些操作（如用戶輸入）發生變化時，也需要能夠反映到數據上。

總的來說，響應式數據綁定是前端開發中的一個重要概念，它使得開發者能夠更加專注于業務邏輯的實現，而不需要過多關注數據的同步問題。

Vue為開發者提供了以下四個函數用來定義響應式數據：

ref()函數：用于將數據轉換成響應式數據，其參數為數據，返回值為轉換后的響應式數據。使用ref()函數操作響應式數據的偽代碼如下：
```
// 定義響應式數據
響應式數據 = ref(數據)
// 修改響應式數據
響應式數據.value = 新的值
```

reactive()函數：用于創建一個響應式對象或數組，將普通的對象或數組作為參數傳給該函數即可。使用reactive()函數操作響應式數據的偽代碼如下：

// 定義響應式對象或數組
響應式對象或數組 = reactive(普通的對象或數組) 
// 修改響應式對象
響應式對象.屬性 = 新值
// 修改響應式數組
響應式數組[index] = 新值

toRef()函數：toRef()函數用于將響應式對象中的單個屬性轉換為響應式數據，使用toRef()函數操作響應式數據的偽代碼如下：
```
響應式數據 = toRef(響應式對象, '屬性名')
```
toRefs()函數：

響應式數據綁定的使用方法

ref() 函數

創建src\components\RefDemo.vue文件用于存放演示代碼，寫入如下代碼：

<template><!-- 輸出message響應式數據 -->{{ message }}
</template>
<script setup>
import { ref } from 'vue';
?
const message = ref("不積跬步，無以至千里。不積小流，無以成江河")
// 在頁面加載完成后3秒修改響應式數據內容
setTimeout(() => message.value = '會當凌絕頂，一覽眾山小' , 3000)
?
</script>
<style>
</style>

修改src\main.js文件，切換頁面中顯示的組件
```
import App from './components/RefDemo.vue'
```
保存代碼，使用瀏覽器訪問http://127.0.0.1:5173/，頁面打開后初始效果如下圖所示：
等待3秒后的頁面效果如下圖所示:

reactive()函數

創建src\components\ReactiveDemo.vue文件用于存放演示代碼，寫入如下代碼：

<template>{{ obj.message }}
</template>
<script setup>
import { reactive } from 'vue'
const obj = reactive({ message: '窮且益堅，不墜青云之志' })
?
setTimeout(() => obj.message = '人有逆天之時，天無絕人之路', 3000)
</script>

修改src\main.js文件，切換頁面中顯示的組件
```
import App from './components/ReactiveDemo.vue'
```
保存代碼，使用瀏覽器訪問http://127.0.0.1:5173/，頁面打開后初始效果如下圖所示：
等待3秒后的頁面效果如下圖所示:

toRef()函數

創建src\components\ToRefDemo.vue文件用于存放演示代碼，寫入如下代碼：

<template><div>message的值：{{ message }}</div><div>obj.message的值：{{ obj.message }}</div>
</template>
<script setup>
import { reactive, toRef } from 'vue'
?
const obj = reactive({ message: '三更燈火五更雞，正是男兒讀書時' })
?
const message = toRef(obj, 'message')
// 延時3秒修改響應式對象屬性
setTimeout(() => message.value = '咬定青山不放松，立根原在破巖中', 3000)
?
</script>

修改src\main.js文件，切換頁面中顯示的組件
```
import App from './components/ToRefDemo.vue'
```
保存代碼，使用瀏覽器訪問http://127.0.0.1:5173/，頁面打開后初始效果如下圖所示：
等待3秒后的頁面效果如下圖所示:

toRefs()函數

創建src\components\ToRefsDemo.vue文件用于存放演示代碼，寫入如下代碼：

<template><div>message的值：{{ message }}</div><div>obj.message的值：{{ obj.message }}</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
?
const obj = reactive({ message: '盛年不重來，一日難再晨' })
?
let { message } = toRefs(obj)
?
setTimeout(() => message.value = '及時當勉勵，歲月不待人', 3000)
</script>

修改src\main.js文件，切換頁面中顯示的組件
```
import App from './components/ToRefsDemo.vue'
```
保存代碼，使用瀏覽器訪問http://127.0.0.1:5173/，頁面打開后初始效果如下圖所示：
保存代碼，使用瀏覽器訪問http://127.0.0.1:5173/，頁面打開后初始效果如下圖所示：

案例練習

結合Vue3組合式API，在頁面中實時顯示當前時間，時間顯示年-月-日時:分:秒.毫秒。

案例實現：

<template><div>{{ current }}</div>
</template>
<style></style>
<script setup>
import { ref,reactive,onMounted } from 'vue'
const current = ref('')
const flush = () => {let now = new Date();let hours = now.getHours().toString().padStart(2, '0');let minutes = now.getMinutes().toString().padStart(2, '0');let seconds = now.getSeconds().toString().padStart(2, '0');let milliseconds = now.getMilliseconds().toString().padStart(3, '0');// 格式化為 "yyyy-MM-dd HH:mm:ss.sss"let formattedTime = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()} ${hours}:${minutes}:${seconds}.${milliseconds}`;current.value = formattedTime
}
setInterval(flush,1)
</script>