1. 使用reactive封裝基礎(chǔ)數(shù)據(jù)類型

傳統(tǒng)開發(fā)模式中，數(shù)據(jù)聲明很簡單。但是在Vue中有多個(gè)響應(yīng)式變量聲明方式，整體的使用規(guī)則如下：

使用reactive來封裝Object，Array，Map，Set數(shù)據(jù)類型；

使用ref封裝String，Number，Boolean類型。

如果使用reactive來封裝基礎(chǔ)數(shù)據(jù)類型，會產(chǎn)生警告，同時(shí)封裝的值不會成為響應(yīng)式對象。

<script setup>
import { reactive } from "vue";
const count = reactive(0);
</script>

但是，可以使用ref來封裝Object、Array等數(shù)據(jù)類型，內(nèi)部會調(diào)用reactive。

2. 解構(gòu)reactive對象

下面代碼中，count封裝成了reactive對象，點(diǎn)擊按鈕時(shí)，count會自增。

<template>
  Counter: {{ state.count }}
  <button @click="add">Increase</button>
 </template>
 <script>
 import { reactive } from "vue";
 export default {
  setup() {
   const state = reactive({ count: 0 });
   function add() {
    state.count++;
   }
   return {
    state,
    add,
   };
  },
 };
 </script>

如果需要使用ES6結(jié)構(gòu)賦值對state進(jìn)行結(jié)構(gòu)，需要使用如下的代碼：

<template>
  <div>Counter: {{ count }}</div>
  <button @click="add">Increase</button>
</template>
<script>
import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({ count: 0 });
    function add() {
      state.count++;
    }
    return {
      ...state,
      add,
    };
  },
};
</script>

結(jié)構(gòu)復(fù)制完成之后，點(diǎn)擊按鈕，效果如下：

代碼看起來比較相似，而且根據(jù)以前的表現(xiàn)，邏輯是可以正常執(zhí)行的。但事實(shí)上，Vue的響應(yīng)式追蹤通過屬性獲取，這意味著我們不能去解構(gòu)響應(yīng)式對象，會導(dǎo)致引用連接丟失。這是響應(yīng)式代理的限制之一。

3. 使用.value造成的困惑

Ref接受一個(gè)值并返回一個(gè)響應(yīng)式對象，該值只有在內(nèi)部對象.value屬性下可用。

const count = ref(0)
 console.log(count) // { value: 0 }
 console.log(count.value) // 0
 count.value++
 console.log(count.value) // 1

但是ref如果應(yīng)用在template中，不需要對ref進(jìn)行解包，也就是不需要使用.vue。

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>
<template>
  <button @click="increment">
    {{ count }} // 不需要調(diào)用.value
  </button>
</template>

需要注意的是，解包只作用于一級屬性，下邊的代碼會返回[object Object]

<script setup>
import { ref } from 'vue'
const object = { foo: ref(1) }
</script>
<template>
  {{ object.foo + 1 }}  // [object Object]
</template>

正確使用.value需要時(shí)間，初學(xué)者偶爾會忘記它。在使用時(shí)，要注意只在合適的場景下使用它。

4. Emitted事件

從Vue發(fā)布以來，子組件可以通過emits與父組件通信，只需要添加一個(gè)自定義的監(jiān)聽器來監(jiān)聽事件即可。

this.$emit('my-event')

<my-component @my-event="doSomething" />

Vue3中，需要使用編譯器宏defineEmits來聲明emits。

const emit = defineEmits(['my-event'])
 emit('my-event')

在setup語法糖下，defineEmits和defineProps會被自動(dòng)引入。其它情況下，需要主動(dòng)引入。

<script setup>
const props = defineProps({
  foo: String
})
const emit = defineEmits(['change', 'delete'])
// setup code
</script>

最后，由于Vue3中，事件必須聲明，因此再需要使用.native修飾符，該修飾符已被移除。

5.聲明組件選項(xiàng)

setup不支持如下組件選項(xiàng)聲明：

• name
• inheritAttrs
• customOptions

如果需要繼續(xù)使用這些屬性，可以聲明多個(gè)script腳本，如下所示：

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {}
  }
</script>
<script setup>
  // script setup logic
</script>

6.使用Reactivity Transform

Reactivity Transform是Vue3中一個(gè)預(yù)覽屬性，有一定的爭議性，默認(rèn)是禁用的。它主要用來簡化組件的聲明方式。這個(gè)想法是利用編譯時(shí)轉(zhuǎn)換來自動(dòng)解包ref，從而避免使用.value。從Vue3.3中已經(jīng)刪除該功能，作為一個(gè)擴(kuò)展包提供。由于它不是Vue的核心部分，且目前風(fēng)險(xiǎn)還是比較多，建議先不要在此方面投入太多事件。感興趣可以參考文章：Reactivity Transform

7. 定義異步組件

異步組件以前是通過將它們包含在方法中來聲明的。

const asyncModal = () => import('./Modal.vue')

Vue3中需要使用defineAsyncComponent來聲明異步組件。

import { defineAsyncComponent } from 'vue'
 const asyncModal = defineAsyncComponent(() 
=> import('./Modal.vue'))

8. template中使用不必要的包裝元素

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

Vue3中支持多個(gè)根元素，不再需要使用外層div元素包裹。

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

9. 生命周期函數(shù)

所有組件生命周期函數(shù)都通過添加on前綴或完全更名實(shí)現(xiàn)，下圖詳細(xì)列出了具體的變化：

10. 產(chǎn)品文檔

官方對文檔已經(jīng)做了更新，補(bǔ)充更新了API，并包含很多有價(jià)值的注釋、指南和最佳實(shí)踐。即使你現(xiàn)在使用的是Vue2，通過閱讀新的文檔也會學(xué)到一些新知識。

以上就是Vue3使用中這些坑你都踩過嗎的詳細(xì)內(nèi)容，更多關(guān)于Vue3踩坑的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論