使用Vue3进行数据绑定及显示列表数据
一、与 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进行数据绑定示例
上一篇Vue3 集成HTTP库axios详情我们已经实现了将后台返回数据,在前台页面展示了(虽然是在控制台),但这也只能说明完成了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
的喜欢。
到此这篇关于使用Vue3进行数据绑定及显示列表数据的文章就介绍到这了,更多相关Vue3进行数据绑定及显示列表数据内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://www.cnblogs.com/longronglang/p/15419139.html
相关文章
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要为大家详细介绍了C# TextBox数据绑定的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
- 这篇文章我们从 ast 生成时调用的 baseParse 函数分析,再到 baseParse 返回 createRoot 的调用结果,一直到细化的讲解了 parseChildren 解析子节点函数中的其中某一个具体解析器的执行过程。最后通过一个简单模板举例,需要的朋友可以参考下...2021-09-25
- 这篇文章主要介绍了Vue3 响应式侦听与计算的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-11
- 这篇文章主要为大家详细介绍了ASP.NET数据绑定控件,为大家解析了ListBox、GridView、Repeater三个数据绑定控件的“高效分页”,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,这篇文章主要给大家介绍了关于Vue3.0中Ref与Reactive区别的相关资料,需要的朋友可以参考下...2021-07-07
- 本实例以MS AdventureWorks2008Entities数据库为基础,演示了LINQ TO ENTITY、LINQ TO ENTITYSQL和LINQ TO ENTITYCLIENT。...2020-06-25
- 当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下...2021-10-17
- 最近在使用Vue.js时候没有自动提示,就很难受,下面这篇文章主要给大家介绍了关于Vue3没有代码提示问题的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下...2023-01-17