Vue3学习（六）之使用Vue3进行数据绑定及显示列表数据

一、写在前面

说来还是比较惭愧的，从周二开始事就比较多，周三还电脑坏了，然后修电脑等等一些杂事，忙的团团转，因为周二、周三自己走的过多了，导致不敢直腰，周四卧床一天。

之前都听说《陈情令》特别火，肖战和王一博正是因为这部剧火的，而大多数人，也因为这部剧，被肖战和王一博圈粉。

而我可能是个例外吧，不点评什么，我怕我的评论区，爆炸哈哈，万一被围攻呢？

我比较喜欢温宁这个角色，也就是居中的鬼将军，整部剧是2倍速看完的，主要都在看他，哈哈。

今天状态好点，就接着来更新了，下面就来更文了。

二、与`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比较》

4、直观感受

目前实际工作中还是以Vue2为主

Vue3包含mounted、data、methods，被一个setup（）全给包了

三、使用Vue3进行数据绑定示例

上一篇我们已经实现了将后台返回数据，在前台页面展示了（虽然是在控制台），但这也只能说明完成了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的喜欢。

到此。实现数据绑定部分介绍完，有兴趣的同学，请自行尝试。