Vue?3需要避免的錯誤

更新時間：2023年03月15日 16:21:57 作者：chuck

Vue3已經穩(wěn)定了相當長一段時間了。許多代碼庫都在生產環(huán)境中使用它，其他人最終都將不得不遷移到Vue3。我現(xiàn)在有機會使用它并記錄了我的錯誤，下面這些錯誤你可能想要避免

使用Reactive聲明原始值

數(shù)據(jù)聲明在過去都是非常直接的，但是現(xiàn)在有很多幫助函數(shù)供我們使用。目前的規(guī)則是：

使用reactive聲明Object, Array, Map, Set
使用ref聲明String, Number, Boolean

為一個原始值使用reactive會返回一個警告，并且該值不會成為可響應式數(shù)據(jù)。

/* DOES NOT WORK AS EXPECTED */
<script setup>
import { reactive } from "vue";

const count = reactive(0);
</script>

矛盾的是，另一種方式是可行的。例如，使用ref來聲明一個Array會在內部調用reactive。

解構響應式數(shù)據(jù)

假設你有一個響應式對象擁有count屬性，并且有一個按鈕來遞增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>

上述邏輯相當直接，而且如預期的那樣工作，但你可能會利用javascript的解構來做以下事情：

/* DOES NOT WORK AS EXPECTED */
<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>

代碼看起來是一樣的，而且根據(jù)我們以前的經驗應該是可行的，但事實上，Vue的響應式跟蹤是通過屬性訪問進行的。這意味著我們不能賦值或解構一個響應式對象，因為與第一個引用的響應式連接已經斷開。這就是使用響應式幫助函數(shù)的局限性之一。

對.value感到困惑

同樣的，使用ref的一個怪異模式可能也很難習慣。

Ref接收一個值，并返回響應式對象。該值在對象內部的.value屬性下可用。

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

但是ref在模板文件中使用時會被解包，并且不需要.value。

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }} // no .value needed
  </button>
</template>

但是要小心了！解包只在頂級屬性中生效。下面的代碼片段會生成[object Object]。

// DON'T DO THIS
<script setup>
import { ref } from 'vue'

const object = { foo: ref(1) }

</script>

<template>
  {{ object.foo + 1 }}  // [object Object]
</template>

正確地使用.value需要時間。盡管某些時候我會忘記如何使用，但是使用它的頻率越來越高。

觸發(fā)事件

自從Vue的最初發(fā)布以來，子組件就可以與父組件使用emit來通信。你只需要添加自定義事件監(jiān)聽器來監(jiān)聽一個事件。

// 子組件
this.$emit('my-event')

// 父組件
<my-component @my-event="doSomething" />

現(xiàn)在，emit需要使用defineEmits來進行聲明。

<script setup>
const emit = defineEmits(['my-event'])
emit('my-event')
</script>

另一件要記住的事情是，defineEmits和defineProps都不需要被導入。它們在使用script setup時自動可用。

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

最后，由于事件現(xiàn)在必須被聲明，所以不需要使用.native修飾符，事實上它已經被移除了。

聲明附加選項

Options API方法有幾個屬性在script setup中是不被支持的。

name
inheritAttrs
插件或庫所需的自定義選項

解決辦法是按照script setupRFC的定義，在同一個組件中設置兩個不同的腳本。

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

<script setup>
  // script setup logic
</script>

使用響應式轉換

Reactivity Transform是Vue 3的一個實驗性但有爭議的功能，目的是簡化組件的聲明方式。它的想法是利用編譯時的轉換來自動解包一個ref，并使.value過時。但現(xiàn)在它被放棄了，并將在Vue 3.3中被刪除。它仍然可以作為一個包使用，但由于它不是Vue核心的一部分，所以最好不要在它身上投入時間。

定義異步組件

以前的異步組件是通過將其包含在一個函數(shù)中來聲明的。

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

從 Vue 3開始，異步組件需要使用defineAsyncComponent幫助函數(shù)來顯式地定義。

import { defineAsyncComponent } from 'vue'

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

在模板中使用多余的包裹元素

在Vue 2中，組件模板需要一個單一的根元素，這有時會引入不必要的包裹元素。

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

現(xiàn)在不再需要這樣了，因為現(xiàn)在支持多個根元素。??

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

使用錯誤的生命周期

所有的組件生命周期事件都被重新命名，要么添加on前綴，要么完全改變名稱。你可以在下面的圖表中查看所有的變化。

不看文檔

最后，官方文檔已經進行了修改以反映新的API，并包括許多有價值的說明、指南和最佳實踐。即使你是一個經驗豐富的Vue 2工程師，你也一定會通過閱讀文檔學到一些新東西。

總結

每個框架都有一個學習曲線，而Vue 3的學習曲線無疑比Vue 2的更陡峭。我仍然不相信兩個版本之間的遷移工作是合理的，但組合式API要整潔得多，在你掌握了它之后會感覺很自然。

最后，請記?。?/p>

犯錯比什么都不做要好得多。

Making mistakes is a lot better than not doing anything.

您可能感興趣的文章:

Vue3
錯誤

Vue中使用的EventBus有生命周期
這篇文章主要介紹了Vue中使用的EventBus有生命周期的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-07-07
Vue-router優(yōu)化import引入過多導致index文件臃腫問題
這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過多導致index文件臃腫問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
Vue3實現(xiàn)組件拖拽實時預覽功能
這篇文章主要介紹了Vue3實現(xiàn)組件拖拽實時預覽功能,對于組件拖拽預覽,用戶可以在含有各種功能組件的列表中,選擇需要的組件進行拖拽,需要的朋友可以參考下
2023-12-12
Vue2和Vue3在v-for遍歷時ref獲取dom節(jié)點的區(qū)別及說明
這篇文章主要介紹了Vue2和Vue3在v-for遍歷時ref獲取dom節(jié)點的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue3封裝echarts組件的實現(xiàn)步驟
這篇文章主要介紹了如何在Vue3中封裝一個高效、可復用的ECharts組件TChart,該組件支持響應式圖表、空數(shù)據(jù)展示、事件監(jiān)聽、主題切換和性能優(yōu)化等功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-01-01
解決使用Vue.js顯示數(shù)據(jù)的時,頁面閃現(xiàn)原始代碼的問題
下面小編就為大家分享一篇解決使用Vue.js顯示數(shù)據(jù)的時,頁面閃現(xiàn)原始代碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
如何在在Vue3中使用markdown 編輯器組件
vue3發(fā)布正式版不久，生態(tài)還沒完全發(fā)展起來，目前支持vue3的開源markdown編輯器組件基本上也寥寥無幾，向大家推薦一個很好用的v-md-editor 組件，組件功能很強大，文檔也比較詳細。該文章只介紹組件的常用功能，更多高級的功能可以參考官方文檔。
2021-05-05
vue 獲取及修改store.js里的公共變量實例
今天小編就為大家分享一篇vue 獲取及修改store.js里的公共變量實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
一文帶你掌握Vue中的路由守衛(wèi)
路由守衛(wèi)（Route?Guards）是?Vue?Router?的一個功能,它允許我們在路由發(fā)生之前執(zhí)行邏輯判斷,這篇文章主要為大家介紹了Vue中路由守衛(wèi)的具體應用,需要的可以了解下
2024-03-03
Vue+Microapp實現(xiàn)微前端的示例詳解
這篇文章主要為大家詳細介紹了如何實現(xiàn)以vite+vue3+Microapp為主應用，以vue2+element為子應用的微前端，感興趣的小伙伴快跟隨小編一起學習一下吧
2023-06-06