使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)
更新時(shí)間：2021年10月23日 11:02:16 作者：久曲健
這篇文章主要介紹了使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)，整篇文章圍繞Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)的想換自來哦展開內(nèi)容,需要的小伙伴可以參考一下
一、與 Vue2 對(duì)比
1、 Vue3 新特性
- 數(shù)據(jù)響應(yīng)重新實(shí)現(xiàn)（
ES6的proxy代替Es5的Object.defineProperty） - 源碼使用
ts重寫，更好的類型推導(dǎo) - 虛擬
DOM新算法（更快，更?。?/li> - 提供了
composition api，為更好的邏輯復(fù)用與代碼組織 - 自定義渲染器（
app、小程序、游戲開發(fā)） Fragment，模板可以有多個(gè)根元素
2、 Vue2、Vue3 響應(yīng)原理對(duì)比
Vue2 使用 Object.defineProperty 方法實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)
缺點(diǎn)：
- 無法檢測到對(duì)象屬性的動(dòng)態(tài)添加和刪除
- 無法檢測到數(shù)組的下標(biāo)和
length屬性的變更
解決方案：
Vue2提供Vue.$set動(dòng)態(tài)給對(duì)象添加屬性Vue.$delete動(dòng)態(tài)刪除對(duì)象屬性
3、重寫數(shù)組的方法，檢測數(shù)組變更
Vue3 使用 proxy 實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)
優(yōu)點(diǎn)：
- 可以檢測到代理對(duì)象屬性的動(dòng)態(tài)新增和刪除
- 可以見到測數(shù)組的下標(biāo)和
length屬性的變化
缺點(diǎn)：
es6的proxy不支持低版本瀏覽器 IE11- 回針對(duì) IE11 出一個(gè)特殊版本進(jìn)行支持
以上引用《[vue2和vue3比較]》( https://www.cnblogs.com/yaxinwang/p/13800734.html )
4、直觀感受
目前實(shí)際工作中還是以Vue2為主
Vue3 包含 mounted、data、methods ，被一個(gè) setup（） 全給包了
二、使用Vue3進(jìn)行數(shù)據(jù)綁定示例
上一篇Vue3 集成HTTP庫axios詳情我們已經(jīng)實(shí)現(xiàn)了將后臺(tái)返回?cái)?shù)據(jù)，在前臺(tái)頁面展示了（雖然是在控制臺(tái)），但這也只能說明完成了90%。
接下來就是我們?cè)趺窗押笈_(tái)接口返回?cái)?shù)據(jù)，怎么展示到頁面的過程了。
1、使用ref實(shí)現(xiàn)數(shù)據(jù)綁定
我們還是需要在 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>
知識(shí)點(diǎn)：
const ebooks=ref(); 這是一個(gè)響應(yīng)式數(shù)據(jù)，而Vue3新增了 ref ，用來定義響應(yīng)式數(shù)據(jù)，也就是說ebooks是實(shí)時(shí)的數(shù)據(jù)展示；ref對(duì)應(yīng)的賦值是value；- 使用 {{變量}} 取值；
重新編譯，啟動(dòng)服務(wù)，查看效果如下：
2、使用reactive實(shí)現(xiàn)數(shù)據(jù)綁定
同樣，還是在 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進(jìn)行數(shù)據(jù)綁定結(jié)果：</strong><p></p>
{{ebooks1}}
<p></p>
<pre>
{{ebooks1}}
</pre>
<strong>使用reactivef進(jìn)行數(shù)據(jù)綁定結(jié)果：</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進(jìn)行數(shù)據(jù)綁定
const ebooks=ref();
// 使用reactive進(jìn)行數(shù)據(jù)綁定
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>
知識(shí)點(diǎn)：
需要從 vue 中導(dǎo)入 reactive , toRef ；
reactive({books:[]}) 中 reactive 的 （） 中必須存放的是對(duì)象，此處我用 books 里面加了個(gè)空集合；
toRef(ebooks1,"books") 中，是將books變?yōu)轫憫?yīng)式變量；
顯然使用 reactive 比較麻煩，項(xiàng)目實(shí)際開發(fā)中必須統(tǒng)一，不能既使用 reactive 又使用 ref ；
用 ref 比較麻煩的是，使用變量的話，不管是獲取還是使用的話都需要加上 .value ；
重新編譯，啟動(dòng)服務(wù)，查看效果如下：
三、寫在最后
還是前端部分開發(fā)給人的成就感更直觀，因?yàn)橹庇^可以看到，不像 controller 或者 service 中業(yè)務(wù)邏輯代碼一樣，寫了好多，也看不出個(gè)所以然，但這也不影響我對(duì) coding 的喜歡。
到此這篇關(guān)于使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)展示列表的數(shù)據(jù)
- vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實(shí)現(xiàn)
- vue實(shí)現(xiàn)動(dòng)態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動(dòng)畫
- vue如何從后臺(tái)獲取數(shù)據(jù)生成動(dòng)態(tài)菜單列表
- Vue3 列表界面數(shù)據(jù)展示詳情
- vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁面及刷新方法詳解
- vue2.0實(shí)現(xiàn)列表數(shù)據(jù)增加和刪除
- Vue如何獲取數(shù)據(jù)列表展示
- vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
- vue父列表數(shù)據(jù)獲取子列表數(shù)據(jù)的實(shí)現(xiàn)步驟
相關(guān)文章
Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問題
這篇文章主要介紹了Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)的功能，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下2022-09-09
vue項(xiàng)目中有一些方法需要在多個(gè)頁面調(diào)用,但為了避免在每個(gè)頁面都import進(jìn)來,可以把方法加到原型上去,這樣在每個(gè)組件中都能使用了,下面這篇文章主要給大家介紹了關(guān)于配置vue全局方法的兩種方式,需要的朋友可以參考下2021-09-09
element-ui中頁面縮放時(shí)table表格內(nèi)容錯(cuò)位的解決
這篇文章主要介紹了element-ui中頁面縮放時(shí)table表格內(nèi)容錯(cuò)位的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗(yàn)
VuePress為每一個(gè)由它生成的頁面提供預(yù)加載的html，不僅加載速度極佳，同時(shí)對(duì)seo非常友好。這篇文章主要介紹了基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗(yàn),需要的朋友可以參考下2018-04-04
vue父組件觸發(fā)事件改變子組件的值的方法實(shí)例詳解
這篇文章主要介紹了vue父組件觸發(fā)事件改變子組件的值的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue 獲取url里參數(shù)的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本篇文章主要介紹了Vue-Router模式和鉤子的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了Vue之Axios的異步通信，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章介紹了vue項(xiàng)目環(huán)境搭建的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04