クイックスタート vue3 構成 API

(創作は簡単ではありません。ありがとうございます。皆さんのサポートが私が前進するための最大の動機です。読んで役に立った場合は、足跡を残してください)

create-vueを使用してプロジェクトを作成する

1. 前提となる環境条件

Node.js バージョン 16.0 以降がインストールされている

ノード -v

2.Vueアプリケーションを作成する

npm init vue@latest

このコマンドは create-vue をインストールして実行します

プロジェクト ディレクトリとキー ファイルについてよく理解する 

主要なファイル:

1. vite.config.js - プロジェクトの構成ファイルは vite の構成に基づいています

2. package.json - プロジェクト パッケージ ファイルのコア依存関係は、Vue3.x および vite になります。

3. main.js - エントリ ファイルの createApp 関数がアプリケーション インスタンスを作成します

4. app.vue - ルートコンポーネント SFC 単一ファイルコンポーネントスクリプト - テンプレート - スタイル

        変更点1: スクリプトスクリプトとテンプレートテンプレートの順序を調整する

        変更 2: テンプレートテンプレートには一意のルート要素が必要なくなりました

        変更 3: スクリプト スクリプトは、複合 API をサポートするためのセットアップ フラグを追加します。

5.index.html - 単一ページのエントリは、 app としての ID を持つマウント ポイントを提供します。

複合API 

セットアップオプション

セットアップオプションの記述方法と実行タイミング

    

1. 実行タイミングが前より早いCreate

2. セットアップ関数では取得できません（未定義です）

<script> 
// setup
// 1. 执行时机，比beforeCreate还要早
// 2. setup函数中，获取不到this (this是undefined)
export default {
  setup () {
    console.log('setup函数',this)
  },
  beforeCreate () {
    console.log('beforeCreate函数')
  }
}
</script>

Web ページは次のように表示されます。                                                 

3. データと関数をテンプレートに適用するには、セットアップの最後にデータと関数を返す必要があります。

<script> 
export default {
  setup () {
    // 数据
    const message = 'hello Vue3'
    // 函数
    const logMessage = () => {
      console.log(message)
    }
    return {
      message,
      logMessage
    }
  }
}
</script>

<template>
  <div>{
   
   { message }}</div>
  <button @click="logMessage">按钮</button>
</template>

<スクリプト設定> 糖衣構文

質問: 毎回戻らなければならないので面倒ですか？

4. セットアップ構文シュガーを通じてコードを簡素化する

<script setup>
const message = 'this is a message'
const logMessage = () => {
  console.log(message)
}
</script>

<template>
  <div>{
   
   { message }}</div>
  <button @click="logMessage">按钮</button>
</template>

リアクティブ関数とref関数

リアクティブ()

機能: オブジェクト型データのパラメータ入力 を受け入れ 、応答オブジェクトを返します。

主要な手順:

1. vue パッケージから リアクティブ関数をインポートします

2. <script setup> で reactive 関数を実行し、 型 objectの初期値 を渡し、変数を使用して戻り値を受け取ります

<script setup>
//1. reactive: 接收一个对象类型的数据，返回一个响应式的对象
import { reactive } from 'vue'
const state = reactive({
  count: 100
})
const setCount = () => {
  state.count++
}

</script>

<template>
  <div>
    <div>{
   
   { state.count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>

ref()

機能: 単純型またはオブジェクト型のデータ入力を 受け取り 、応答オブジェクトを返します。

本質:元の受信データに基づいて、オブジェクトのレイヤーが外側のレイヤーでラップされ、複合型にラップされます。

           最下層は、複合型にパッケージ化された後、リアクティブを使用して実装されます。

注意点：

           1. スクリプト内のデータにアクセスするには、.value を渡す必要があります。

           2. テンプレートでは、.value を追加する必要はありません (レイヤーの選択にご協力ください)

主要な手順:

1. vue パッケージから ref 関数をインポートします

2. <script setup> 内の ref 関数を実行して 初期値を渡し、 変数を使用して ref 関数の戻り値を受け取ります

<script setup>
import { ref } from 'vue'
const count = ref(0)
const setCount = () => {
  count.value++
}
</script>

<template>
  <div>
    <div>{
   
   { count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>

計算された

計算プロパティの基本的な考え方は Vue2 と全く同じで、 結合 API 下の計算プロパティは 書き方を変えるだけです

主要な手順: 1. 計算された関数 をインポートします。

2. 実行関数は、 コールバックパラメータの 応答データに基づいて計算された値を返し、 それを変数 で受け取ります

<script setup>
import{computed,ref}from 'vue'
const list=ref([1,2,3,4,5,6,7,8])
const computedList = computed(()=>{
  return list.value.filter(item=>item>2)
})
</script>

<template>
  <div>
    <div>原始数据: {
   
   { list }}</div>
    <div>计算后的数据: {
   
   { computedList }}</div>
  </div>
</template>a

時計

機能: 1 つ以上のデータの変更をリッスンし 、データが変更されたときにコールバック関数を実行します。

2 つの追加パラメータ: 1. immediate (即時実行) 2. deep (ディープ リスニング)

単一のデータをリッスンする

1. インポートウォッチ 機能

2. watch 関数を実行して 、応答データ (ref オブジェクト) とリッスンするコールバック関数を渡します。

複数のデータをリッスンする 

複数の応答性のあるデータ変更を同時にリッスンするには、 どのデータ変更が行われたとしても、コールバックを実行する必要があります。

すぐに 

リスナーが作成されたらすぐにコールバックをトリガーし、応答データが変更された後もコールバックの実行を継続します。

深い

watch によって監視される ref オブジェクトは、 デフォルトでは浅いです。ネストされたオブジェクトのプロパティを直接変更しても、コールバックの実行はトリガーされません 。深いオプションを有効にする必要があります。

<script setup>
import{watch,ref}from 'vue'
// 4. deep 深度监视, 默认 watch 进行的是 浅层监视
//    const ref1 = ref(简单类型) 可以直接监视
//    const ref2 = ref(复杂类型) 监视不到复杂类型内部数据的变化
const userInfo = ref({
  name: 'zs',
  age: 18
})
const setUserInfo = () => {
  // 修改了 userInfo.value 修改了对象的地址，才能监视到
  // userInfo.value = { name: 'ls', age: 50 }
  userInfo.value.age++
}

// deep 深度监视
watch(userInfo, (newValue) => {
  console.log(newValue)
}, {
  deep: true
})
</script>

<template>
  <div>{
   
   { userInfo }}</div>
  <button @click="setUserInfo">修改userInfo</button>
</template>a

オブジェクトのプロパティを正確に聞く 

ディープオンしない前提で年齢の変化をリッスンし、年齢が変わった場合のみコールバックを実行する

<script setup>
import{watch,ref}from 'vue'
// 4. deep 深度监视, 默认 watch 进行的是 浅层监视
//    const ref1 = ref(简单类型) 可以直接监视
//    const ref2 = ref(复杂类型) 监视不到复杂类型内部数据的变化
const userInfo = ref({
  name: 'zs',
  age: 18
})
const setUserInfo = () => {
  // 修改了 userInfo.value 修改了对象的地址，才能监视到
  // userInfo.value = { name: 'ls', age: 50 }
  userInfo.value.age++
}

// 5. 对于对象中的单个属性，进行监视
watch(() => userInfo.value.age, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})
</script>

<template>
  <div>{
   
   { userInfo }}</div>
  <button @click="setUserInfo">修改userInfo</button>
</template>

ライフサイクル機能

Vue3 のライフサイクル API (オプションの VS 構成)

父子通信 

結合された API による親から子への転送

基本的な考え方

1.親コンポーネント内の子コンポーネントに 属性をバインドする

2. サブコンポーネントは props オプションを通じてそれを受け取ります

defineProps の原理: これはコンパイル段階での識別子であり、実際のコンパイラーが解析する際に、これに遭遇するとコンパイルして変換します。

結合された API での子から親への受け渡し 

基本的な考え方

1. 親コンポーネントで、 @binding イベントを通じて子コンポーネントにラベルを付けます

2. イベントは、 emit メソッドを通じてサブコンポーネント内でトリガーされます。

テンプレートリファレンス 

使用方法 (コンポーネントの例として DOM を使用します)

ref 識別を通じて実際のdom オブジェクトまたはコンポーネント インスタンス オブジェクトを取得します

1. ref 関数を呼び出して ref オブジェクトを生成します

2. ref 識別子を介して ref オブジェクトをラベルにバインドします

定義エクスポーズ() 

デフォルトでは、 <script setup> の構文糖の下にあるコンポーネント内のプロパティとメソッドは 、親コンポーネントからアクセスできるように 開かれていません。

マクロをdefineExposeでコンパイルすることで、 アクセスを許可するプロパティとメソッドを指定できます。