Vue3需要避免的錯誤有哪些

使用Reactive宣告原始值

資料宣告在過去都是非常直接的，但是現在有許多幫助函數供我們使用。目前的規則是：

• 使用reactive宣告Object, Array, Map, Set

• # #使用

  ref聲明String, Number, Boolean

#為原始值使用

reactive會傳回一個警告，且該值不會成為可響應式資料。

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

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

矛盾的是，另一種方式是可行的。例如，使用

ref來宣告一個Array會在內部呼叫reactive。

解構響應式資料

假設你有一個響應式物件擁有

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>

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

對.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 &#39;vue&#39;

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 &#39;vue&#39;

const object = { foo: ref(1) }

</script>

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

正確地使用

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

觸發事件

自從Vue的最初發布以來，子元件就可以與父元件使用

emit來通訊。你只需要新增自訂事件監聽器來監聽一個事件。

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

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

現在，

emit需要使用defineEmits來進行宣告。

<script setup>
const emit = defineEmits([&#39;my-event&#39;])
emit(&#39;my-event&#39;)
</script>

另一件要記住的事情是，

defineEmits和defineProps都不需要被導入。它們在使用script setup時自動可用。

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

const emit = defineEmits([&#39;change&#39;, &#39;delete&#39;])
// setup code
</script>

最後，由於事件現在必須被聲明，所以不需要使用

.native修飾符，事實上它已經被移除了。

宣告附加選項

Options API方法有幾個屬性在

script setup中是不支援的。

• name

• #inheritAttrs

##外掛程式或函式庫所需的自訂選項
解決方案是依照

script setup

RFC的定義，在同一個元件中設定兩個不同的腳本。 <pre class="brush:js;">&lt;script&gt; export default { name: &amp;#39;CustomName&amp;#39;, inheritAttrs: false, customOptions: {} } &lt;/script&gt; &lt;script setup&gt; // script setup logic &lt;/script&gt;</pre>使用響應式轉換

Reactivity Transform是Vue 3的一個實驗性但有爭議的功能，目的是簡化元件的宣告方式。它的想法是利用編譯時的轉換來自動解包一個

ref

，並使.value#過時。但現在它被放棄了，並將在Vue 3.3中被刪除。它仍然可以作為一個包使用，但由於它不是Vue核心的一部分，所以最好不要在它身上投入時間。 定義非同步元件

先前的非同步元件是透過將其包含在一個函數中來宣告的。

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

從 Vue 3開始，非同步元件需要使用

defineAsyncComponent

幫助函數來明確定義。 <pre class="brush:js;">import { defineAsyncComponent } from &amp;#39;vue&amp;#39; const asyncModal = defineAsyncComponent(() =&gt; import(&amp;#39;./Modal.vue&amp;#39;))</pre>在模板中使用多餘的包裹元素

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

使用錯誤的生命週期

所有的元件生命週期事件都被重新命名，要麼加上

on

前綴，要麼完全改變名稱。你可以在下面的圖表中查看所有的變化。

以上是Vue3需要避免的錯誤有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！