Vue3学习(六)之 使用Vue3进行数据绑定及显示列表数据
一、写在前面
说来还是比较惭愧的,从周二开始事就比较多,周三电脑还坏了。
然后,就是各种乱七八杂、突如其来的破事,忙的团团转,由于走的过多了,导致不敢直腰,周四卧床一天。
之前都听说《陈情令》这部剧特别火。当然,肖战和王一博也正是因为这部剧火的,因此大多数人,也因为这部剧,被肖战和王一博圈粉。
而我可能是个例外吧,不敢点评什么,我怕我的评论区,爆炸,哈哈,万一被围攻呢?
我比较喜欢温宁这个角色,也就是居中的鬼将军,整部剧都是以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,期待你的加入!!
欢迎关注我的微信公众号:软件测试君
![](https://www.cnblogs.com/images/cnblogs_com/longronglang/1061549/o_QQ%E6%88%AA%E5%9B%BE20190728134401.jpg)