Vue3使用時應避免的10個錯誤總結
使用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>
[Vue warn]: value cannot be made reactive
矛盾的是，另一種方式是可行的。例如，使用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中是不被支持的。
nameinheritAttrs- 插件或庫所需的自定義選項
解決辦法是按照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要整潔得多，在你掌握了它之后會感覺很自然。
以上就是 Vue3使用時應避免的10個錯誤總結的詳細內容，更多關于 Vue3錯誤的資料請關注腳本之家其它相關文章！
相關文章
本文主要介紹了如何監(jiān)聽Vue項目報錯的4種方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue-router兩種模式區(qū)別及使用注意事項,結合實例形式詳細分析了vue-router兩種模式hash模式與history模式的區(qū)別、用法與操作注意事項,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue的七種傳值方式,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
道axios是一個庫,并不是vue中的第三方插件,下面這篇文章主要給大家介紹了關于Vue3使用axios的配置教程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue3原始值響應方案及響應丟失問題解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
如何利用Vue3管理系統(tǒng)實現(xiàn)動態(tài)路由和動態(tài)側邊菜單欄
通常我們在vue項目中都是前端配置好路由的,但在一些項目中我們可能會遇到權限控制,這樣我們就涉及到動態(tài)路由的設置了,下面這篇文章主要給大家介紹了關于如何利用Vue3管理系統(tǒng)實現(xiàn)動態(tài)路由和動態(tài)側邊菜單欄的相關資料,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了element-ui中按需引入的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
在前端開發(fā)的時候經常會遇到這樣的困惑,設計師給你的設計稿的尺寸和頁面的尺寸不一致,導致了頁面無法正常顯示,下面這篇文章主要給大家介紹了關于一招解決vue頁面自適應布局的相關資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue中實現(xiàn)點擊變成全屏及縮放功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
在?Vue?項目中如何引用?assets?文件夾中的圖片(方式匯總)
Vue中引用assets文件夾中的圖片有多種方式,在.vue文件的模板部分,使用相對路徑或通過@別名引用圖片,在CSS中,通過相對路徑或@別名引用圖片作為背景,在JavaScript中,通過import語句導入圖片資源,并使用v-bind在模板中綁定顯示,這些方法均可有效管理和引用項目中的圖片資源2024-09-09