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

时间:2024-02-25 12:03:31

一、写在前面

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

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

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

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

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

二、与Vue2对比

1、Vue3新特性:

  1. 数据响应重新实现(ES6proxy代替Es5Object.defineProperty
  2. 源码使用ts重写,更好的类型推导
  3. 虚拟DOM新算法(更快,更小)
  4. 提供了composition api,为更好的逻辑复用与代码组织
  5. 自定义渲染器(app、小程序、游戏开发)
  6. Fragment,模板可以有多个根元素

2、Vue2、Vue3响应原理对比

Vue2使用Object.defineProperty方法实现响应式数据
缺点:

  • 无法检测到对象属性的动态添加和删除
  • 无法检测到数组的下标和length属性的变更
    解决方案:
  • Vue2提供Vue.$set动态给对象添加属性
  • Vue.$delete动态删除对象属性

3、重写数组的方法,检测数组变更

  1. Vue3使用proxy实现响应式数据
  2. 优点:
  • 可以检测到代理对象属性的动态新增和删除
  • 可以见到测数组的下标和length属性的变化
  1. 缺点:
  • es6proxy不支持低版本浏览器 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的喜欢。

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