Vue3學習（六）之 使用Vue3進行數據綁定及顯示列表數據

一、寫在前面

說來還是比較慚愧的，從周二開始事就比較多，周三電腦還壞了。

然后，就是各種亂七八雜、突如其來的破事，忙的團團轉，由於走的過多了，導致不敢直腰，周四卧床一天。

之前都聽說《陳情令》這部劇特別火。當然，肖戰和王一博也正是因為這部劇火的，因此大多數人，也因為這部劇，被肖戰和王一博圈粉。

而我可能是個例外吧，不敢點評什么，我怕我的評論區，爆炸，哈哈，萬一被圍攻呢？

我比較喜歡溫寧這個角色，也就是居中的鬼將軍，整部劇都是以2倍速看完的，主要都在看他，哈哈。

今天狀態好點，就接着來更新了，下面就來更文了。

二、與Vue2對比

1、Vue3新特性：

1. 數據響應重新實現（ES6的proxy代替Es5的Object.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屬性的變化

3. 缺點：

• es6的proxy不支持低版本瀏覽器 IE11
• 回針對IE11出一個特殊版本進行支持

以上引用《[vue2和vue3比較]》(https://www.cnblogs.com/yaxinwang/p/13800734.html)

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的喜歡。

到此。實現數據綁定部分介紹完，有興趣的同學，請自行嘗試。