資料宣告在過去都是非常直接的，但是現在有許多幫助函數供我們使用。目前的規則是：
使用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>/* 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>ref的一個怪異模式可能也很難習慣。
Ref接收一個值，並回傳響應式物件。該值在物件內部的.value屬性下可用。
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value++
console.log(count.value) // 1ref在模板檔案中使用時會被解包，且不需要.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需要時間。儘管某些時候我會忘記如何使用，但是使用它的頻率越來越高。
emit來通訊。你只需要新增自訂事件監聽器來監聽一個事件。
// 子组件 this.$emit('my-event') // 父组件 <my-component @my-event="doSomething" />
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>.native修飾符，事實上它已經被移除了。
script setup中是不支援的。
name
#inheritAttrs
RFC的定義，在同一個元件中設定兩個不同的腳本。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"><script>
export default {
name: &#39;CustomName&#39;,
inheritAttrs: false,
customOptions: {}
}
</script>
<script setup>
// script setup logic
</script></pre><div class="contentsignin">登入後複製</div></div>使用響應式轉換
，並使.value#過時。但現在它被放棄了，並將在Vue 3.3中被刪除。它仍然可以作為一個包使用，但由於它不是Vue核心的一部分，所以最好不要在它身上投入時間。 定義非同步元件
const asyncModal = () => import('./Modal.vue')
從 Vue 3開始，非同步元件需要使用
defineAsyncComponent幫助函數來明確定義。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">import { defineAsyncComponent } from &#39;vue&#39;
const asyncModal = defineAsyncComponent(() => import(&#39;./Modal.vue&#39;))</pre><div class="contentsignin">登入後複製</div></div>在模板中使用多餘的包裹元素
<!-- 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>
使用錯誤的生命週期
前綴，要麼完全改變名稱。你可以在下面的圖表中查看所有的變化。
以上是Vue3需要避免的錯誤有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
