目錄

• 一、與 2 對比
• 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 部分程式碼，具體示例程式碼如下：

<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>
       http://www.cppcns.com         <span>
                 ugxcfPyr <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">option4www.cppcns.com</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',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,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進行資料繫結及顯示列表資料內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！