Vue3學習(六)之使用Vue3進行資料繫結及顯示列表資料

語言: CN / TW / HK

一、寫在前面

說來還是比較慚愧的,從週二開始事就比較多,週三還電腦壞了,然後修電腦等等一些雜事,忙的團團轉,因為週二、週三自己走的過多了,導致不敢直腰,週四臥床一天。

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

而我可能是個例外吧,不點評什麼,我怕我的評論區,爆炸哈哈,萬一被圍攻呢?

我比較喜歡溫寧這個角色,也就是居中的鬼將軍,整部劇是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比較]》( 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 的喜歡。

到此。實現資料繫結部分介紹完,有興趣的同學,請自行嘗試。