溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“如何使用Vue3進行數據綁定及顯示列表數據”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
一、與 Vue2 對比
1、 Vue3 新特性
2、 Vue2、Vue3 響應原理對比
3、重寫數組的方法，檢測數組變更
4、直觀感受
二、使用Vue3進行數據綁定示例
1、使用ref實現數據綁定
2、使用reactive實現數據綁定
數據響應重新實現（ ES6 的 proxy 代替 Es5 的 Object.defineProperty ）
源碼使用 ts 重寫，更好的類型推導
虛擬 DOM 新算法（更快，更小）
提供了 composition api ，為更好的邏輯復用與代碼組織
自定義渲染器（ app 、小程序、游戲開發）
Fragment ，模板可以有多個根元素
Vue2 使用 Object.defineProperty 方法實現響應式數據
缺點：
無法檢測到對象屬性的動態添加和刪除
無法檢測到數組的下標和length屬性的變更
解決方案：
Vue2 提供 Vue.$set 動態給對象添加屬性
Vue.$delete 動態刪除對象屬性
Vue3 使用 proxy 實現響應式數據
優點：
可以檢測到代理對象屬性的動態新增和刪除
可以見到測數組的下標和length屬性的變化
缺點：
es6 的 proxy 不支持低版本瀏覽器 IE11
回針對 IE11 出一個特殊版本進行支持
以上引用《[vue2和vue3比較]》( https://www.cnblogs.com/yaxinwang/p/13800734.html )
目前實際工作中還是以Vue2為主
Vue3 包含 mounted、data、methods ，被一個 setup（） 全給包了
上一篇Vue3 集成HTTP庫axios詳情我們已經實現了將后臺返回數據，在前臺頁面展示了（雖然是在控制臺），但這也只能說明完成了90%。
接下來就是我們怎么把后臺接口返回數據，怎么展示到頁面的過程了。
我們還是需要在 home 里面修改，畢竟在頁面展示，所以只需修改 Home 部分代碼，具體示例代碼如下：
<template>
<a-layout>
<a-layout-sider width="200" >
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
:
>
<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
:
>
{{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 ；
使用 {{變量}} 取值；
重新編譯，啟動服務，查看效果如下：
同樣，還是在 home 里面修改，示例代碼如下：
<template>
<a-layout>
<a-layout-sider width="200" >
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
:
>
<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
:
>
<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 ；
重新編譯，啟動服務，查看效果如下：
“如何使用Vue3進行數據綁定及顯示列表數據”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
