本篇内容介绍了“如何使用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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。