本篇內(nèi)容主要講解“Vue3使用需要避免的錯(cuò)誤是什么”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue3使用需要避免的錯(cuò)誤是什么”吧!

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的鎮(zhèn)江網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

使用Reactive聲明原始值

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

• 使用reactive聲明Object, Array, Map, Set

• 使用ref聲明String, Number, Boolean

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

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

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

矛盾的是，另一種方式是可行的。例如，使用ref來(lái)聲明一個(gè)Array會(huì)在內(nèi)部調(diào)用reactive。

解構(gòu)響應(yīng)式數(shù)據(jù)

假設(shè)你有一個(gè)響應(yīng)式對(duì)象擁有count屬性，并且有一個(gè)按鈕來(lái)遞增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>

上述邏輯相當(dāng)直接，而且如預(yù)期的那樣工作，但你可能會(huì)利用javascript的解構(gòu)來(lái)做以下事情：

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

代碼看起來(lái)是一樣的，而且根據(jù)我們以前的經(jīng)驗(yàn)應(yīng)該是可行的，但事實(shí)上，Vue的響應(yīng)式跟蹤是通過(guò)屬性訪問(wèn)進(jìn)行的。這意味著我們不能賦值或解構(gòu)一個(gè)響應(yīng)式對(duì)象，因?yàn)榕c第一個(gè)引用的響應(yīng)式連接已經(jīng)斷開(kāi)。這就是使用響應(yīng)式幫助函數(shù)的局限性之一。

對(duì).value感到困惑

同樣的，使用ref的一個(gè)怪異模式可能也很難習(xí)慣。

Ref接收一個(gè)值，并返回響應(yīng)式對(duì)象。該值在對(duì)象內(nèi)部的.value屬性下可用。

const count = ref(0)

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

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

但是ref在模板文件中使用時(shí)會(huì)被解包，并且不需要.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>

但是要小心了！解包只在頂級(jí)屬性中生效。下面的代碼片段會(huì)生成[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需要時(shí)間。盡管某些時(shí)候我會(huì)忘記如何使用，但是使用它的頻率越來(lái)越高。

觸發(fā)事件

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

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

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

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

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

另一件要記住的事情是，defineEmits和defineProps都不需要被導(dǎo)入。它們?cè)谑褂?code>script setup時(shí)自動(dòng)可用。

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

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

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

聲明附加選項(xiàng)

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

• name

• inheritAttrs

• 插件或庫(kù)所需的自定義選項(xiàng)

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

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

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

使用響應(yīng)式轉(zhuǎn)換

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

定義異步組件

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

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

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

import { defineAsyncComponent } from 'vue'

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

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

在Vue 2中，組件模板需要一個(gè)單一的根元素，這有時(shí)會(huì)引入不必要的包裹元素。

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

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

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

使用錯(cuò)誤的生命周期

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

到此，相信大家對(duì)“Vue3使用需要避免的錯(cuò)誤是什么”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文名稱(chēng)：Vue3使用需要避免的錯(cuò)誤是什么
標(biāo)題鏈接：http://chinadenli.net/article34/gpdhpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站營(yíng)銷(xiāo)、電子商務(wù)、網(wǎng)站內(nèi)鏈、App開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)