如何使用Vue3进行数据绑定及显示列表数据

本篇内容介绍了"如何使用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 出一个特殊版本进行支持
  

以上引用《[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 部分代码，具体示例代码如下：

知识点：

• const ebooks=ref() ; 这是一个响应式数据，而 Vue3 新增了 ref ，用来定义响应式数据，也就是说 ebooks 是实时的数据展示；

• ref 对应的赋值是 value ；

• 使用 {{变量}} 取值；
  

重新编译，启动服务，查看效果如下：

2、使用reactive实现数据绑定

同样，还是在 home 里面修改，示例代码如下：

知识点：

需要从 vue 中导入 reactive , toRef ；
reactive({books:[]}) 中 reactive 的 （） 中必须存放的是对象，此处我用 books 里面加了个空集合；
toRef(ebooks1,"books") 中，是将books变为响应式变量；
显然使用 reactive 比较麻烦，项目实际开发中必须统一，不能既使用 reactive 又使用 ref ；
用 ref 比较麻烦的是，使用变量的话，不管是获取还是使用的话都需要加上 .value ；

重新编译，启动服务，查看效果如下：

"如何使用Vue3进行数据绑定及显示列表数据"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！