Vue3 ドキュメント クイックスタート

エクスポートデフォルト{
  小道具: {
    タイトル: 文字列
  },
  セットアップ(プロパティ) {
    コンソールログ(props.title)
  }
}

'vue' から { toRefs } をインポートします

セットアップ(プロパティ) {
    const { title } = toRefs(props)

    console.log(タイトル.値)
}

xport デフォルト {
  セットアップ(プロパティ、コンテキスト) {
    // 属性（非応答オブジェクト）
    コンソールログ(コンテキスト属性)

    // スロット（非応答オブジェクト）
    コンソールログ(コンテキストスロット)

    // トリガーイベント（メソッド）
    コンソールログ(コンテキスト出力)
  }
}

エクスポートデフォルト{
  セットアップ(props、{attrs、slots、emit}) {
    ...
  }
}

<テンプレート>
  <!-- テンプレート内で使用すると自動的に解凍されるため、.value は必要ありません -->
  <div>{{ 読者数 }} {{ book.title }}</div>
</テンプレート>

<スクリプト>
  'vue' から { ref, reactive } をインポートします

  エクスポートデフォルト{
    設定（） {
      const 読者数 = ref(0)
      const book = reactive({ title: 'Vue 3 ガイド' })

      // テンプレートに公開する
      戻る {
        読者数、
        本
      }
    }
  }
</スクリプト>

const obj = リアクティブ({ カウント: 0 })

<テンプレート>
  <div id="app">{state.count }</div>
</テンプレート>

<スクリプト>
'vue' から { reactive } をインポートします
エクスポートデフォルト{
  設定（） {
    // 状態はリアクティブ状態になりました const state = reactive({
      カウント: 0,
    })
  }
}
</スクリプト>

定数カウント = ref(0)
console.log(count.value) // 0

カウント値++
console.log(count.value) // 1

<テンプレート>
  <div>{{ カウント }}</div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    設定（） {
      戻る {
        カウント: ref(0),
      }
    },
  }
</スクリプト>

定数カウント = ref(0)
定数状態 = リアクティブ({
  カウント、
})

console.log(状態.count) // 0

状態数 = 1
console.log(count.value) // 1

定数otherCount = ref(2)

状態.count = その他のカウント
console.log(状態.count) // 2
console.log(count.value) // 1

定数 arr = リアクティブ([ref(0)])
// ここで .value が必要です
コンソール.log(arr[0].値)

const map = reactive(新しい Map([['foo', ref(0)]]))
// ここで .value が必要です
console.log(map.get('foo').value)

インターフェースRef<T> {
  値: T
}

関数 ref<T>(値: T): Ref<T>

const foo = ref<string | number>('foo') // foo の型: Ref<string | number>

foo.value = 123 // 合格!

定数カウント = ref(1)
const plusOne = 計算された(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // エラー!

定数カウント = ref(1)
const plusOne = 計算された({
  取得: () => count.value + 1,
  設定: (値) => {
    カウント値 = val - 1
  },
})

plusOne.値 = 1
console.log(count.value) // 0

// 読み取り専用関数 computed<T>(getter: () => T): Readonly<Ref<Readonly<T>>>

// 変更可能な関数 computed<T>(options: {
  取得: () => T
  設定: (値: T) => void
}): 参照<T>

const オリジナル = リアクティブ({ カウント: 0 })

const コピー = 読み取り専用(オリジナル)

ウォッチエフェクト(() => {
  // 依存関係の追跡 console.log(copy.count)
})

// オリジナルを変更すると、コピー元のリスナーがトリガーされます。original.count++

// コピーを変更できないため警告が表示されます copy.count++ // 警告!

定数カウント = ref(0)

watchEffect(() => console.log(count.value))
//-> 0 を出力

タイムアウトを設定する(() => {
  カウント値++
  //-> 1 を出力
}, 100)

const stop = watchEffect(() => {
  /* ... */
})

// その後stop()

ウォッチエフェクト((onInvalidate) => {
  const トークン = performAsyncOperation(id.value)
  onInvalidate(() => {
    // ID が変更されるか、リスニングを停止した場合 // 前の非同期操作をキャンセルします token.cancel()
  })
})

定数データ = ref(null)
watchEffect(非同期() => {
  data.value = fetchData(props.id) を待機します
})

<テンプレート>
  <div>{{ カウント }}</div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    設定（） {
      定数カウント = ref(0)

      ウォッチエフェクト(() => {
        console.log(カウント.値)
      })

      戻る {
        カウント、
      }
    },
  }
</スクリプト>

マウント時(() => {
  ウォッチエフェクト(() => {
    // ここでDOMまたはテンプレート参照にアクセスできます
  })
})

// watchEffectを同期的に実行する(
  () => {
    /* ... */
  },
  {
    フラッシュ: 'sync'、
  }
）

// watchEffect を実行する(
  () => {
    /* ... */
  },
  {
    フラッシュ: 'pre'、
  }
）

ウォッチエフェクト(
  () => {
    /* 副作用 */
  },
  {
    onTrigger(e) {
      デバッガ
    },
  }
）

関数watchEffect(
  効果: (onInvalidate: InvalidateCbRegistrator) => void、
  オプション?: WatchEffectOptions
): ストップハンドル

インターフェース WatchEffectOptions {
  フラッシュ?: 'pre' | 'post' | 'sync'
  onTrack?: (イベント: DebuggerEvent) => void
  onTrigger?: (イベント: DebuggerEvent) => void
}

インターフェース DebuggerEvent {
  効果: ReactiveEffect
  対象: 任意
  タイプ: 操作タイプ
  キー: 文字列 | シンボル | 未定義
}

型 InvalidateCbRegistrator = (invalidate: () => void) => void

タイプ StopHandle = () => void

// ゲッターをリッスンする
定数状態 = リアクティブ({ カウント: 0 })
時計（
  () => 状態.count、
  (カウント、前のカウント) => {
    /* ... */
  }
）

// refを直接聞く
定数カウント = ref(0)
ウォッチ(カウント、(カウント、前のカウント) => {
  /* ... */
})

ウォッチ([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

// 単一のデータソースをリッスンする function watch<T>(
  ソース: WatcherSource<T>、
  折り返し電話：
    値: T、
    古い値: T、
    onInvalidate: InvalidateCbRegistrator
  ) => 無効、
  オプション?: WatchOptions
): ストップハンドル

// 複数のデータソースを監視する function watch<T extends WatcherSource<unknown>[]>(
  出典: T
  折り返し電話：
    値: MapSources<T>、
    古い値: MapSources<T>、
    onInvalidate: InvalidateCbRegistrator
  ) => 無効、
  オプション? : WatchOptions
): ストップハンドル

WatcherSource<T> = Ref<T> | (() => T) 型

タイプ MapSources<T> = {
  [K in keyof T]: T[K]はWatcherSource<infer V>を拡張しますか? V: なし
}

// 共通プロパティについては、`watchEffect` の型定義を参照してください。インターフェース WatchOptions extends WatchEffectOptions {
  即時?: ブール値 // デフォルト: false
  深い?: ブール値
}