欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)

 更新時間：2021年10月23日 11:02:16   作者：久曲健  
這篇文章主要介紹了使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)，整篇文章圍繞Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)的想換自來哦展開內(nèi)容,需要的小伙伴可以參考一下

一、與 Vue2 對比

1、 Vue3 新特性

  • 數(shù)據(jù)響應(yīng)重新實現(xiàn)（ ES6 的 proxy 代替 Es5 的 Object.defineProperty ）
  • 源碼使用 ts 重寫，更好的類型推導(dǎo)
  • 虛擬 DOM 新算法（更快，更?。?/li>
  • 提供了 composition api ，為更好的邏輯復(fù)用與代碼組織
  • 自定義渲染器（ app 、小程序、游戲開發(fā)）
  • Fragment ，模板可以有多個根元素

2、 Vue2、Vue3 響應(yīng)原理對比

Vue2 使用 Object.defineProperty 方法實現(xiàn)響應(yīng)式數(shù)據(jù)

缺點：

  • 無法檢測到對象屬性的動態(tài)添加和刪除
  • 無法檢測到數(shù)組的下標(biāo)和length屬性的變更

解決方案：

  • Vue2 提供 Vue.$set 動態(tài)給對象添加屬性
  • Vue.$delete 動態(tài)刪除對象屬性

3、重寫數(shù)組的方法，檢測數(shù)組變更

Vue3 使用 proxy 實現(xiàn)響應(yīng)式數(shù)據(jù)

優(yōu)點：

  • 可以檢測到代理對象屬性的動態(tài)新增和刪除
  • 可以見到測數(shù)組的下標(biāo)和length屬性的變化

缺點：

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

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

4、直觀感受

目前實際工作中還是以Vue2為主

Vue3 包含 mounted、data、methods ，被一個 setup（） 全給包了

二、使用Vue3進(jìn)行數(shù)據(jù)綁定示例

上一篇Vue3 集成HTTP庫axios詳情我們已經(jīng)實現(xiàn)了將后臺返回數(shù)據(jù)，在前臺頁面展示了（雖然是在控制臺），但這也只能說明完成了90%。

接下來就是我們怎么把后臺接口返回數(shù)據(jù)，怎么展示到頁面的過程了。

1、使用ref實現(xiàn)數(shù)據(jù)綁定

我們還是需要在 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() ; 這是一個響應(yīng)式數(shù)據(jù)，而 Vue3 新增了 ref ，用來定義響應(yīng)式數(shù)據(jù)，也就是說 ebooks 是實時的數(shù)據(jù)展示；
  • ref 對應(yīng)的賦值是 value ；
  • 使用 {{變量}} 取值；

重新編譯，啟動服務(wù)，查看效果如下：

2、使用reactive實現(xiàn)數(shù)據(jù)綁定

同樣，還是在 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進(jìn)行數(shù)據(jù)綁定結(jié)果：</strong><p></p>
      {{ebooks1}}
      <p></p>
      <pre>
{{ebooks1}}
      </pre>
      <strong>使用reactivef進(jìn)行數(shù)據(jù)綁定結(jié)果：</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進(jìn)行數(shù)據(jù)綁定
    const ebooks=ref();
    // 使用reactive進(jìn)行數(shù)據(jù)綁定
    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 中導(dǎo)入 reactive , toRef ；
reactive({books:[]}) 中 reactive 的 （） 中必須存放的是對象，此處我用 books 里面加了個空集合；
toRef(ebooks1,"books") 中，是將books變?yōu)轫憫?yīng)式變量；
顯然使用 reactive 比較麻煩，項目實際開發(fā)中必須統(tǒng)一，不能既使用 reactive 又使用 ref ；
用 ref 比較麻煩的是，使用變量的話，不管是獲取還是使用的話都需要加上 .value ；

重新編譯，啟動服務(wù)，查看效果如下：

三、寫在最后

還是前端部分開發(fā)給人的成就感更直觀，因為直觀可以看到，不像 controller 或者 service 中業(yè)務(wù)邏輯代碼一樣，寫了好多，也看不出個所以然，但這也不影響我對 coding 的喜歡。

到此這篇關(guān)于使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue中的計算屬性的使用和vue實例的方法示例

    vue中的計算屬性的使用和vue實例的方法示例

    本篇文章主要介紹了vue計算屬性的使用和vue實例的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法

    vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法

    今天小編就為大家分享一篇vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Vue列表循環(huán)從指定下標(biāo)開始的多種解決方案

    Vue列表循環(huán)從指定下標(biāo)開始的多種解決方案

    這篇文章主要介紹了Vue列表循環(huán)從指定下標(biāo)開始的多種方案,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-04-04
  • vue單頁應(yīng)用加百度統(tǒng)計代碼（親測有效）

    vue單頁應(yīng)用加百度統(tǒng)計代碼（親測有效）

    這篇文章主要介紹了vue單頁應(yīng)用加百度統(tǒng)計代碼的解決方法，需要的朋友參考下吧
    2018-01-01
  • Vue調(diào)用后端java接口的實例代碼

    Vue調(diào)用后端java接口的實例代碼

    今天小編就為大家分享一篇Vue調(diào)用后端java接口的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • Vue路由模式中的hash和history模式詳細(xì)介紹

    Vue路由模式中的hash和history模式詳細(xì)介紹

    VUE分為兩種路由模式分別是hash（哈希）和history，他們的區(qū)別是hash模式不會包含在http請求中，并且不會重新加載頁面，而使用history模式的話，如果前端的url和后端發(fā)起請求的url不一致的話，會報404錯誤，所以使用history模式的話我們需要和后端進(jìn)行配合
    2022-09-09
  • electron-vue?運行報錯?Object.fromEntries?is?not?a?function的解決方案

    electron-vue?運行報錯?Object.fromEntries?is?not?a?function

    Object.fromEntries()?是?ECMAScript?2019?新增的一個靜態(tài)方法，用于將鍵值對列表（如數(shù)組）轉(zhuǎn)換為對象，如果在當(dāng)前環(huán)境中不支持該方法，可以使用?polyfill?來提供類似功能，接下來通過本文介紹electron-vue?運行報錯?Object.fromEntries?is?not?a?function的解決方案
    2023-05-05
  • vue如何設(shè)置描點跳轉(zhuǎn)到對應(yīng)頁面

    vue如何設(shè)置描點跳轉(zhuǎn)到對應(yīng)頁面

    這篇文章主要介紹了vue如何設(shè)置描點跳轉(zhuǎn)到對應(yīng)頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • 詳解Vue.js搭建路由報錯 router.map is not a function

    詳解Vue.js搭建路由報錯 router.map is not a function

    這篇文章主要介紹了詳解Vue.js搭建路由報錯 router.map is not a function，非常具有實用價值，需要的朋友可以參考下
    2017-06-06
  • vue的keep-alive用法技巧

    vue的keep-alive用法技巧

    在本篇文章里小編給大家整理的是關(guān)于vue的keep-alive用法技巧以及實例代碼，需要的朋友們學(xué)習(xí)下。
    2019-08-08

最新評論