使用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进行数据绑定示例 上一篇Vue3 集成HTTP库axios详情我们已经实现了将后台返回数据,在前台页面展示了(虽然是在控制台),但这也只能说明完成了90%。
接下来就是我们怎么把后台接口返回数据,怎么展示到页面的过程了。
1、使用ref实现数据绑定
我们还是需要在
home
里面修改,毕竟在页面展示,所以只需修改 Home
部分代码,具体示例代码如下:subnav 1option1option2option3option4 subnav 2option5option6option7option8 subnav 3option9option10option11option12{{ebooks}} {{ebooks}}
知识点:
const ebooks=ref()
; 这是一个响应式数据,而Vue3
新增了 ref ,用来定义响应式数据,也就是说ebooks
是实时的数据展示;ref
对应的赋值是value
;- 使用 {{变量}} 取值;
文章图片
2、使用reactive实现数据绑定
同样,还是在
home
里面修改,示例代码如下:subnav 1option1option2option3option4 subnav 2option5option6option7option8 subnav 3option9option10option11option12使用ref进行数据绑定结果:
{{ebooks1}}
{{ebooks1}}
使用reactivef进行数据绑定结果:
{{ebooks2}}
{{ebooks2}}
知识点:
需要从
vue
中导入 reactive
, toRef
;reactive({books:[]})
中 reactive
的 ()
中必须存放的是对象,此处我用 books
里面加了个空集合;toRef(ebooks1,"books")
中,是将books
变为响应式变量;显然使用 reactive 比较麻烦,项目实际开发中必须统一,不能既使用
reactive
又使用 ref
;用 ref 比较麻烦的是,使用变量的话,不管是获取还是使用的话都需要加上 .
value
;重新编译,启动服务,查看效果如下:
文章图片
三、写在最后 还是前端部分开发给人的成就感更直观,因为直观可以看到,不像
controller
或者 service
中业务逻辑代码一样,写了好多,也看不出个所以然,但这也不影响我对 coding
的喜欢。【使用Vue3进行数据绑定及显示列表数据】到此这篇关于使用Vue3进行数据绑定及显示列表数据的文章就介绍到这了,更多相关Vue3进行数据绑定及显示列表数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 使用协程爬取网页,计算网页数据大小