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

 更新时间:2021年10月23日 11:02:16   作者:久曲健  
这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕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 包含 mounteddatamethods ,被一个 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进行数据绑定及显示列表数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • 详解vue-router和vue-cli以及组件之间的传值

    详解vue-router和vue-cli以及组件之间的传值

    这篇文章主要介绍了详解vue-router和vue-cli以及组件之间的传值,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Vue.js学习笔记之 helloworld

    Vue.js学习笔记之 helloworld

    vue是法语中视图的意思,Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。有需要的小伙伴可以参考下
    2016-08-08
  • Vue2.0 $set()的正确使用详解

    Vue2.0 $set()的正确使用详解

    这篇文章主要介绍了Vue2.0 $set()的正确使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue-router路由简单案例介绍

    vue-router路由简单案例介绍

    本篇文章主要介绍了vue-router路由的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • Vue中CSS动画原理的实现

    Vue中CSS动画原理的实现

    这篇文章主要介绍了Vue中CSS动画原理的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • mpvue中配置vuex并持久化到本地Storage图文教程解析

    mpvue中配置vuex并持久化到本地Storage图文教程解析

    这篇文章主要介绍了mpvue中配置vuex并持久化到本地Storage的教程详解,# 配置vuex和在vue中相同,只是mpvue有一个坑,就是不能直接在new Vue的时候传入store。本文分步骤给大家介绍的非常详细,需要的朋友参考下吧
    2018-03-03
  • vue实现拖拽效果

    vue实现拖拽效果

    这篇文章主要为大家详细介绍了vue实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • Vue项目接入Paypal实现示例详解

    Vue项目接入Paypal实现示例详解

    这篇文章主要介绍了Vue项目接入Paypal实现示例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 优化Vue项目编译文件大小的方法步骤

    优化Vue项目编译文件大小的方法步骤

    这篇文章主要介绍了优化Vue项目编译文件大小的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue2.0的虚拟DOM渲染思路分析

    vue2.0的虚拟DOM渲染思路分析

    vue2.0采用了虚拟DOM来代替对真实DOM的操作,最后通过某种机制来完成对真实DOM的更新,渲染视图。这篇文章主要介绍了vue2.0的虚拟DOM渲染,需要的朋友可以参考下
    2018-08-08

最新评论