使⽤Vue3进⾏数据绑定及显⽰列表数据
⽬录
⼀、与 Vue2 对⽐
1、 Vue3 新特性
2、 Vue2、Vue3 响应原理对⽐
3、重写数组的⽅法，检测数组变更
4、直观感受
⼆、使⽤Vue3进⾏数据绑定⽰例
1、使⽤ref实现数据绑定
2、使⽤reactive实现数据绑定
三、写在最后
⼀、与 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 出⼀个特殊版本进⾏⽀持
4、直观感受
⽬前实际⼯作中还是以Vue2为主
Vue3包含mounted、data、methods ，被⼀个setup（）全给包了
⼆、使⽤Vue3进⾏数据绑定⽰例
上⼀篇我们已经实现了将后台返回数据，在前台页⾯展⽰了（虽然是在控制台），但这也只能说明完成了90%。
接下来就是我们怎么把后台接⼝返回数据，怎么展⽰到页⾯的过程了。
1、使⽤ref实现数据绑定
我们还是需要在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(()=>{
<("localhost:8888/ebook/list?name=spring").then(response =>{
console.log("onMounted");
const data=response.data;
ebooks.t;
})
})
return{
ebooks
}
}
});
</script>
知识点：
const ebooks=ref() ; 这是⼀个响应式数据，⽽Vue3 新增了 ref ，⽤来定义响应式数据，也就是说ebooks 是实时的数据展⽰；
ref 对应的赋值是value ；
使⽤ {{变量}} 取值；
重新编译，启动服务，查看效果如下：
2、使⽤reactive实现数据绑定
同样，还是在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',reactive 数组
setup(){
console.log('set up');
//使⽤ref进⾏数据绑定
const ebooks=ref();
// 使⽤reactive进⾏数据绑定
const ebooks1=reactive({books:[]})
onMounted(()=>{
<("localhost:8888/ebook/list?name=spring").then(response =>{
console.log("onMounted");
const data=response.data;
ebooks.t;
ebooks1.t;
})
})
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 的喜欢。
到此这篇关于使⽤Vue3进⾏数据绑定及显⽰列表数据的⽂章就介绍到这了，更多相关Vue3进⾏数据绑定及显⽰列表数据内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。