Vue 3 でのセットアップ

序文

のリリースに伴い、の修正、変更、文法糖など、vue 3多くのものが追加および変更されました。もっと言えば、この記事の主人公は、非常に使いやすい構文糖衣にほかなりません。响应式option Apicomponents Apisetupvue 3v2v3v3setup

序章

setup单文件组件 (SFC)は、 で使用される组合式 APIコンパイル時のものです语法糖。SFCこの構文は、と の両方を使用する場合の组合式 APIデフォルトの推奨事項です。

アドバンテージ：

• ボイラープレートの内容が減り、コードがより簡潔になります。
• TypeScript純粋な宣言propsイベントとカスタム イベントを使用する機能。
• 実行時のパフォーマンスの向上 (そのテンプレートは同じスコープ内のレンダリング関数にコンパイルされ、レンダリング コンテキスト プロキシ オブジェクトが回避されます)。
• IDE の型推論パフォーマンスの向上 (言語サーバーがコードから型を抽出する作業の削減)。

使用

<script setup>
...
</script>

実際、v3彼が登場したばかりの頃は、このように書くことはできず、次のように書く必要がありました。

<script>
export default {
    
    
    setup () {
    
    
        const name = ''
        return {
    
    
            name
        }
    }
}
</script>

のバージョンからは3.2、SFC最初と同じようにファイルに書き込むことができます。この種の写真は非常に便利です。メソッドや変数を取り出す必要はありませんが、このものにはそのようなものがないreturnことに注意してください。なぜですか? ライフサイクル図を見てみましょう。setupthisvue

上の図から、後で実行されることがわかりますがsetup、rendererこの時点ではまだ実行されていません。vueつまりinit Options Api、コンポーネント インスタンスが作成/解析される前には、コンポーネント インスタンスは存在しませんthis。

関連拡張

使用するコンポーネントを登録する

template以前のバージョンでは、テンプレートで使用する前にコンポーネントを導入して登録する必要がありましたsetupが、 では登録の必要がなく、コンポーネントをインポートするだけで使用できます。ただし、コンポーネントの名前を変更できないという欠点があります。コンポーネント名は大きなこぶの形にする必要があり、コンポーネント名の名前を変更したい場合は、2 つのタグを記述するだけで済みますscript。

<template>
    <div>
        <span>我是父组件</span>
        <br />
        <Child></Child>
    </div>
</template>

<script setup>
import Child from "./components/child.vue"

</script>

小道具

propsこの部分とあの部分の違いはそれほどvue2大きくなく、親コンポーネントは同じですが、子コンポーネントは少し変更されています。defineProps親コンポーネントが子コンポーネントに渡すことができるものを宣言しprops、それを子コンポーネントで使用する必要があります。

<template>
    <div>
        <span>我是子组件: {
    
    {
    
     message }}</span>
    </div>
</template>

<script setup>
import {
    
     defineProps } from 'vue';

const props = defineProps({
    
    
    message: {
    
    
        type: String,
        default: ''
    }
})

</script>

ここで受け取る変数を宣言する理由は、テンプレートを自動的に解析できるdefinePropsためですが、テンプレートはタグ内にないため、その中で。templatescriptscript

console.log(message)

ただし、defineProps受信した変数を通じて取得する場合は取得できます。v2ここでも、同様に、 のprops値サブコンポーネントは変更できないことに注意してください。

console.log(props.message)

発する

emitイベント登録。props同じように、defineEmits登録する必要があります。emit+ は、 で一般的に使用される親子コンポーネント通信方法propsです。vue

このメソッドはイベント名の配列を受け取り、呼び出し時にイベント名とコールバック パラメーターを指定します。

const emit = defineEmits(['init'])

setTimeout(() => {
    
    
    emit('init', 1222)
}, 2000);

親コンポーネント

<template>
    <div>
        <span>我是父组件</span>
        <br />
        <Child message="我是父组件传递的 msg 值" @init="init"></Child>
    </div>
</template>

<script setup>
import Child from "./components/child.vue"

const init = (event) => {
    
    
    console.log(event);
}

</script>

参照

これはrefそうではありませんref、ここにありますref(引用)。混乱しないでください、紳士諸君。

参照することでref、サブコンポーネント内の変数やメソッドを簡単に操作したり取得したりできます。refレスポンシブなものと同じように宣言してから、サブコンポーネントにマウントして使用する必要があります。

<template>
    <div>
        <span>我是父组件</span>
        <br />
        <Child ref="myChild" message="我是父组件传递的 msg 值" ></Child>
    </div>
</template>

<script setup>
import Child from "./components/child.vue"

const myChild = ref(null)

</script>

次のコードが何を出力するか推測してみましょう。

setTimeout(()=>{
    
    
    console.log(myChild.value.name);
}, 1000)

待望の結果を発表し、その推測が正しかったかどうかを注目する時が来ました。

答えは次のとおりですundefined。

諦めてもらうためにサブコンポーネントの内容を見せておきますが、私は変更していません。

<template>
    <div>
        <span>我是子组件: {
    
    {
    
     message }}</span>
        <span>{
    
    {
    
     name }}</span>
    </div>
</template>

<script setup>
import {
    
     defineProps } from 'vue';

const props = defineProps({
    
    
    message: {
    
    
        type: String,
        default: ''
    }
})

const name = '我是子组件：张三'


</script>

ここで次のことについて話し合いdefineExpose、審査員も一緒に降ります。

定義公開

ではvue3、子コンポーネント内のものが親コンポーネントによって呼び出される必要がある場合、外部から呼び出す前に公開する必要があります。そうでない場合は、上記の例と同じになります。えー、ここで私が介入する必要があります。外の世界にさらされることはtemplate同じことではありません。

defineExpose({
    
    
    name
})

もう一度見てみましょう、彼はまだundefinedいますか？

ドンドン、発表されました！それはもうありませんundefined。

やっと

次の図は、この記事を執筆するための環境を列挙したものです。

• vue：3.2.45
• vite：4.0.2
• @vitejs/plugin-vue：4.0.0

vue3上記は関連する説明の一部ですsetup。不備がある場合は、修正してコメントしてください。