記錄--開始使用Vue 3時應避免的10個錯誤

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

Vue 3 穩定已經有一段時間了，許多代碼庫正在生產中使用它，其他人最終也必須進行遷移，我有機會與它一起作業，并記錄了我的錯誤，這可能是你想避免的，

1.使用回應式助手宣告基本型別

資料宣告曾經很簡單，但現在有多個輔助工具可用，現在的一般規則是：

• 使用 reactive 代替 Object, Array, Map, Set
• 使用 ref 代替 String, Number, Boolean

對于原始值使用回應式會導致警告，并且該值不會被設定為回應式:

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

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

[Vue warn]: value cannot be made reactive

事例：codesandbox.io/s/jolly-ish…

矛盾的是，反過來卻行得通！例如，使用 ref 宣告 Array 將在內部呼叫 reactive ，

2.解構失去回應式值

讓我們想象一下，有一個具有計數器和一個按鈕以增加計數器的回應式物件，

<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>

/* 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>

地址：codesandbox.io/s/gracious-…

代碼看起來一樣，根據我們以前的經驗，應該可以運行，但實際上，Vue 的反應性跟蹤是基于屬性訪問的，這意味著我們不能賦值或解構一個回應性物件，因為與第一個參考的回應性連接會丟失，這是使用 reactive helper 的限制之一，

3.對".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

<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>

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

const object = { foo: ref(1) }

</script>

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

正確使用 ".value" 需要時間，盡管我偶爾會忘記它，但我發現我自己最初比需要的時候用得更頻繁，

4. Emitted Events

自 Vue 初始版本以來，子組件可以使用 emits 與父組件通信，只需要添加一個自定義監聽器來監聽事件即可，

this.$emit('my-event')

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

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

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

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

5.宣告額外選項

有一些 Options API 方法的屬性在 script setup 中不受支持，

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

解決方案是在同一組件中定義兩個不同的腳本，如腳本設定RFC中所定義的那樣:

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

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

6.使用 Reactivity Transform

回應性轉換是 Vue 3 的一項實驗性但有爭議的特性，其目標是簡化宣告組件的方式，這個想法是利用編譯時轉換來自動解包 ref 并使 .value 變得過時，但現在已經被取消，并將在 Vue 3.3 中被移除，它仍然會以一個包的形式存在，但由于它不是 Vue 核心的一部分，所以最好不要在它上面投入時間，

7. 定義異步組件

異步組件以前是通過將它們包含在一個函式中來宣告的，

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

import { defineAsyncComponent } from 'vue'

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

8. 在模板中使用不必要的包裝器

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

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

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

9. 使用錯誤的生命周期事件，

所有組件生命周期事件都被重命名，要么通過添加 on 前綴，要么完全更改名稱，可以在以下圖形中檢查所有更改，

10. Skipping the Documentation

最后，官方檔案已經進行了重大改版，以反映新的 API，并包含許多有價值的注解、指南和最佳實踐，即使你是一名經驗豐富的 Vue 2 工程師，通過閱讀這個檔案，你肯定能學到一些新的東西，

每個框架都有一個學習曲線，Vue 3的曲線無疑比Vue 2更陡峭，我仍然不確定版本之間的遷移作業是否值得，但組合API更加清晰，一旦掌握了它，就會感覺很自然，

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug，

本文轉載于:

https://juejin.cn/post/7241963298890137637

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

標籤：其他

上一篇：JavaScript語法學習

下一篇：返回列表