響應式資料
什麼是響應式資料？
當資料發生改變時，DOM樹的內容，會和資料同步更新。
vue3不是自動響應式資料，需要經過函式處理得到響應式資料物件。
ref和reactive
這兩個函式都會返回響應式資料物件，但也有不同。
ref
ref通常用於將一個基本型別轉為響應式資料物件。
基本型別包括：數、字串、布林值、null和undefined。
讀寫值（訪問和修改屬性值）
-
在script標籤中，透過該物件.value屬性，讀寫值。
-
在template標籤中，直接訪問該物件，讀寫值。
栗子
App.vue
<script setup>
//ref,reactive
import {ref, reactive} from 'vue'
//雖然ref和reactive都是響應式資料函式，但ref更常用於基本型別，reactive更常用於物件。
let str1 = ref(10);
let str2 = ref("msg");
</script>
<template>
<!--在事件繫結中，可以直接寫一些簡單的處理器-->
<h3 v-text="str1"></h3>
<button @click="str1++">按鈕1</button>
<h3 v-text="str2"></h3>
<button @click="str2='hello'">按鈕2</button>
</template>
<style scoped>
</style>
效果展示
reactive
reactive通常用於將一個物件轉為響應式資料物件。
物件包括：陣列，物件等。
讀寫值（訪問和修改屬性值）
可以直接訪問該物件讀寫值。
栗子
App.vue
<script setup>
//ref,reactive
import {ref, reactive} from 'vue'
//雖然ref和reactive都是響應式資料函式，但ref更常用於基本型別，reactive更常用於物件。
//物件
let str3 = reactive({name: "張三", age: 18});
//陣列
let str4 = reactive([ {name: "張三", age: 18}, {name: "李四", age: 18}, {name: "王五", age: 18} ]);
</script>
<template>
<!--在事件繫結中，可以直接寫一些簡單的處理器-->
<h3>{{str3.age}}</h3>
<button @click="++str3.age">按鈕1</button>
<h3 v-text="str4"></h3>
</template>
<style scoped>
</style>
效果展示（栗子中去掉了ref的程式碼）
可以發現str4展示的好醜啊。沒關係，在列表渲染中可以展示的更加完善。
條件渲染
條件渲染專門負責布林表示式被滿足時，才展示的資料/標籤。
提供了三種條件渲染命令：v-if、v-else和v-show
語法格式如下：
<標籤 v-if=" 布林表示式 "></標籤>
<標籤 v-else=" 與v-if的布林表示式相反 "></標籤>
//類似於Java中的if和else
<標籤 v-show=" 布林表示式 "></標籤>
條件渲染的特點：
-
同Java一樣，v-else不能單獨出現，必須跟隨v-if。
-
某個標籤的v-if的布林表示式不被滿足時，DOM樹中不會出現該標籤。
-
某個標籤的v-show的布林表示式不被滿足時，DOM樹中依然會出現該標籤，只是display屬性為none。
栗子
App.vue
<script setup>
import {ref} from 'vue';
//響應式資料，及時更新dom樹
let flag = ref(true);
</script>
<template>
<!--展示條件渲染2、3特點-->
<h3 v-if="false">hello v-if!</h3>
<h3 v-show="false">hello v-show!</h3>
<h3 v-if="flag">hello world!我是flag為T</h3>
<h3 v-else>hello world!我是flag為F</h3>
<button @click="flag = !flag">切換flag</button>
</template>
<style scoped>
</style>
效果展示
當v-if的布林表示式不成立時，DOM樹中不會出現該內容。
列表渲染
列表渲染可以遍歷。經常基於一個陣列物件來渲染一個列表。
提供了一種列表渲染命令：v-for
語法格式如下：
<標籤 v-for="item in items"></標籤>
文字渲染的特點：
-
item in items類似與Java的foreach，只不過冒號變成了in。
-
官方不推薦在同一個標籤內，和v-if一起使用。
注意是同一個標籤內。可以是上下級標籤。
栗子
App.vue
<script setup>
import {ref, reactive} from 'vue';
//響應式基礎的str4
let per = reactive([{name: "張三", age: 18}, {name: "李四", age: 18}, {name: "王五", age: 18}]);
</script>
<template>
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr v-for="p in per">
<td v-text="p.name"></td>
<td v-text="p.age"></td>
</tr>
<!--這種寫法雖然生效，但是官方不推薦。降低了可讀性-->
<tr v-if="per.length>0" v-for="p in per">
<td>per陣列是空的</td>
</tr>
<!--使用了上級標籤div，推薦，增加了可讀性。-->
<div v-if="per.length>0">
<tr v-for="p in per">
<td v-text="p.name"></td>
<td v-text="p.age"></td>
</tr>
</div>
</table>
</template>
<style scoped>
</style>
效果展示
