Vue3學習（六）之使用Vue3進行資料繫結及顯示列表資料
阿新 • • 發佈：2021-10-23
一、寫在前面
說來還是比較慚愧的，從週二開始事就比較多，週三還電腦壞了，然後修電腦等等一些雜事，忙的團團轉，因為週二、週三自己走的過多了，導致不敢直腰，週四臥床一天。
之前都聽說《陳情令》特別火，肖戰和王一博正是因為這部劇火的，而大多數人，也因為這部劇，被肖戰和王一博圈粉。
而我可能是個例外吧，不點評什麼，我怕我的評論區，爆炸哈哈，萬一被圍攻呢？
我比較喜歡溫寧這個角色，也就是居中的鬼將軍，整部劇是2倍速看完的，主要都在看他，哈哈。
今天狀態好點，就接著來更新了，下面就來更文了。
二、與Vue2對比
1、Vue3新特性：
- 資料響應重新實現（
ES6的proxy代替Es5的Object.defineProperty） - 原始碼使用
ts重寫，更好的型別推導 - 虛擬
DOM新演算法（更快，更小） - 提供了
composition api，為更好的邏輯複用與程式碼組織 - 自定義渲染器（
app、小程式、遊戲開發） Fragment，模板可以有多個根元素
2、Vue2、Vue3響應原理對比
Vue2使用Object.defineProperty方法實現響應式資料
缺點：
- 無法檢測到物件屬性的動態新增和刪除
- 無法檢測到陣列的下標和length屬性的變更
解決方案： Vue2提供Vue.$set動態給物件新增屬性Vue.$delete動態刪除物件屬性
3、重寫陣列的方法，檢測陣列變更
Vue3使用proxy實現響應式資料- 優點：
- 可以檢測到代理物件屬性的動態新增和刪除
- 可以見到測陣列的下標和
length屬性的變化
- 缺點：
es6的proxy不支援低版本瀏覽器IE11- 回針對
IE11出一個特殊版本進行支援
以上引用《[vue2和vue3比較]》(https://www.cnblogs.com/yaxinwang/p/13800734.html)
4、直觀感受
目前實際工作中還是以Vue2為主
Vue3包含mounted、data、methods，被一個setup（）全給包了
三、使用Vue3進行資料繫結示例
上一篇我們已經實現了將後臺返回資料，在前臺頁面展示了（雖然是在控制檯），但這也只能說明完成了90%。
接下來就是我們怎麼把後臺介面返回資料，怎麼展示到頁面的過程了。
1、使用ref實現資料繫結
我們還是需要在home裡面修改，畢竟在頁面展示，所以只需修改Home部分程式碼，具體示例程式碼如下：
<template>
<a-layout>
<a-layout-sider width="200" style="background: #fff">
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
:style="{ height: '100%', borderRight: 0 }"
>
<a-sub-menu key="sub1">
<template #title>
<span>
<user-outlined />
subnav 1
</span>
</template>
<a-menu-item key="1">option1</a-menu-item>
<a-menu-item key="2">option2</a-menu-item>
<a-menu-item key="3">option3</a-menu-item>
<a-menu-item key="4">option4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #title>
<span>
<laptop-outlined />
subnav 2
</span>
</template>
<a-menu-item key="5">option5</a-menu-item>
<a-menu-item key="6">option6</a-menu-item>
<a-menu-item key="7">option7</a-menu-item>
<a-menu-item key="8">option8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub3">
<template #title>
<span>
<notification-outlined />
subnav 3
</span>
</template>
<a-menu-item key="9">option9</a-menu-item>
<a-menu-item key="10">option10</a-menu-item>
<a-menu-item key="11">option11</a-menu-item>
<a-menu-item key="12">option12</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
<a-layout-content
:style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
>
{{ebooks}}
<pre>
{{ebooks}}
</pre>
</a-layout-content>
</a-layout>
</template>
<script lang="ts">
import { defineComponent,onMounted,ref } from 'vue';
import axios from 'axios';
export default defineComponent({
name: 'Home',
setup(){
console.log('set up');
const ebooks=ref();
onMounted(()=>{
axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{
console.log("onMounted");
const data=response.data;
ebooks.value=data.content;
})
})
return{
ebooks
}
}
});
</script>
知識點：
const ebooks=ref();這是一個響應式資料，而Vue3新增了ref，用來定義響應式資料，也就是說ebooks是實時的資料展示；ref對應的賦值是value；- 使用
{{變數}}取值；
重新編譯，啟動服務，檢視效果如下：
2、使用reactive實現資料繫結
同樣，還是在home裡面修改，示例程式碼如下：
<template>
<a-layout>
<a-layout-sider width="200" style="background: #fff">
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
:style="{ height: '100%', borderRight: 0 }"
>
<a-sub-menu key="sub1">
<template #title>
<span>
<user-outlined />
subnav 1
</span>
</template>
<a-menu-item key="1">option1</a-menu-item>
<a-menu-item key="2">option2</a-menu-item>
<a-menu-item key="3">option3</a-menu-item>
<a-menu-item key="4">option4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #title>
<span>
<laptop-outlined />
subnav 2
</span>
</template>
<a-menu-item key="5">option5</a-menu-item>
<a-menu-item key="6">option6</a-menu-item>
<a-menu-item key="7">option7</a-menu-item>
<a-menu-item key="8">option8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub3">
<template #title>
<span>
<notification-outlined />
subnav 3
</span>
</template>
<a-menu-item key="9">option9</a-menu-item>
<a-menu-item key="10">option10</a-menu-item>
<a-menu-item key="11">option11</a-menu-item>
<a-menu-item key="12">option12</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
<a-layout-content
:style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
>
<strong>使用ref進行資料繫結結果：</strong><p></p>
{{ebooks1}}
<p></p>
<pre>
{{ebooks1}}
</pre>
<strong>使用reactivef進行資料繫結結果：</strong><p></p>{{ebooks2}}
<p></p>
<pre>
{{ebooks2}}
</pre>
</a-layout-content>
</a-layout>
</template>
<script lang="ts">
import { defineComponent,onMounted,ref,reactive,toRef} from 'vue';
import axios from 'axios';
export default defineComponent({
name: 'Home',
setup(){
console.log('set up');
//使用ref進行資料繫結
const ebooks=ref();
// 使用reactive進行資料繫結
const ebooks1=reactive({books:[]})
onMounted(()=>{
axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{
console.log("onMounted");
const data=response.data;
ebooks.value=data.content;
ebooks1.books=data.content;
})
})
return{
ebooks1: ebooks,
ebooks2:toRef(ebooks1,"books")
}
}
});
</script>
知識點：
- 需要從
vue中匯入reactive,toRef； reactive({books:[]})中reactive的（）中必須存放的是物件，此處我用books裡面加了個空集合；toRef(ebooks1,"books")中，是將books變為響應式變數；- 顯然使用
reactive比較麻煩，專案實際開發中必須統一，不能既使用reactive又使用ref； - 用
ref比較麻煩的是，使用變數的話，不管是獲取還是使用的話都需要加上.value；
重新編譯，啟動服務，檢視效果如下：
四、寫在最後
還是前端部分開發給人的成就感更直觀，因為直觀可以看到，不像controller或者service中業務邏輯程式碼一樣，寫了好多，也看不出個所以然，但這也不影響我對coding的喜歡。
到此。實現資料繫結部分介紹完，有興趣的同學，請自行嘗試。
優秀不夠，你是否無可替代
軟體測試交流QQ群：721256703，期待你的加入！！
歡迎關注我的微信公眾號：軟體測試君