Vue3の一般的なAPIの使用方法の紹介

<テンプレート>
 <div id="アプリ">
 <!-- 4. レスポンシブ データ オブジェクト内のアクセス数 -->
 {{ 状態.count }}
 </div>
</テンプレート>

<スクリプト>
// 1. vueからreactiveをインポートする 
'vue' から {reactive} をインポートします
エクスポートデフォルト{
 名前: 'アプリ'、
 設定（） {
 // 2. レスポンシブなデータオブジェクトを作成する const state = reactive({count: 3})

 // 3. テンプレートで使用するためのレスポンシブデータオブジェクトの状態を返す return {state}
 }
}
</スクリプト>

<スクリプト>
'vue' から {ref, reactive} をインポートします。
エクスポートデフォルト{
 名前: 'アプリ'、
 設定（） {
 定数オブジェクト = {数: 3}
 定数state1 = ref(obj)
 定数state2 = リアクティブ(obj)

 コンソールログ(状態1)
 コンソールログ(状態2)
 }
 
}
</スクリプト> 

<テンプレート>
 <div>
 <div ref="el">div 要素</div>
 </div>
</テンプレート>

<スクリプト>
'vue' から { ref, onMounted } をインポートします
エクスポートデフォルト{
 設定（） {
 // DOM 参照を作成します。名前は要素の ref 属性名と同じである必要があります。const el = ref(null)

 // ターゲット要素はマウント後にのみelを通じて取得できます onMounted(() => {
  el.value.innerHTML = 'コンテンツが変更されました'
 })

 // 作成された参照を返す return {el}
 }
}
</スクリプト>

<スクリプト>
// 1. toRefをインポートする
'vue' から { toRef } をインポートします
エクスポートデフォルト{
 設定（） {
  定数オブジェクト = {数: 3}
  // 2. obj オブジェクトの属性 count の値をレスポンシブ データに変換します。const state = toRef(obj, 'count')
 
  // 3. テンプレートで使用するために toRef でラップされたデータ オブジェクトを返します。 return {state}
 }
}
</スクリプト>

<テンプレート>
 <p>{{ 状態1 }}</p>
 <button @click="add1">追加</button>

 <p>{{ 状態2 }}</p>
 <button @click="add2">追加</button>
</テンプレート>

<スクリプト>
'vue' から {ref, toRef} をインポートします。
エクスポートデフォルト{
 設定（） {
  定数オブジェクト = {数: 3}
  定数state1 = ref(obj.count)
  定数state2 = toRef(obj, 'count')

  関数add1() {
   状態1.値++
   console.log('元の値:', obj);
   console.log('レスポンシブデータオブジェクト:', state1);
  }

  関数add2() {
   状態2.値++
   console.log('元の値:', obj);
   console.log('レスポンシブデータオブジェクト:', state2);
  }

  {state1、state2、add1、add2} を返します。
 }
}
</スクリプト>

<スクリプト>
// 1. toRefs をインポートする
'vue' から { toRefs } をインポートします
エクスポートデフォルト{
 設定（） {
  定数オブジェクト = {
   名前: 「フロントエンドインプレッション」
   年齢: 22歳
   性別: 0
  }
  // 2. objオブジェクトの属性countの値をレスポンシブデータに変換します。const state = toRefs(obj)
 
  // 3. console.log(state) を印刷して確認する
 }
}
</スクリプト>

<スクリプト>
<テンプレート>
 <p>{{state.a} } </p>
 <p>{{ state.first.b }}</p>
 <p>{{ state.first.second.c }}</p>
 <button @click="change1">変更 1</button>
 <button @click="change2">変更 2</button>
</テンプレート>
<スクリプト>
'vue' から { shallowReactive } をインポートします。
エクスポートデフォルト{
 設定（） {
  定数オブジェクト = {
   a: 1、
   初め： {
   b: 2,
   2番目： {
    3: 3 です
   }
   }
  }
  
  const 状態 = shallowReactive(obj)
 
  関数change1() {
   状態.a = 7
  }

  関数change2() {
   状態.first.b = 8
   状態.第一.第二.c = 9
   コンソールログ(状態);
  }

  {状態} を返す
 }
}
</スクリプト>

<テンプレート>
 <p>{{state.a} } </p>
 <p>{{ state.first.b }}</p>
 <p>{{ state.first.second.c }}</p>
 <button @click="change">変更</button>
</テンプレート>

<スクリプト>
'vue' から {shallowRef, triggerRef} をインポートします。
エクスポートデフォルト{
 設定（） {
  定数オブジェクト = {
   a: 1、
   初め： {
   b: 2,
   2番目： {
    3: 3 です
   }
   }
  }
  
  定数状態 = shallowRef(obj)
  コンソールにログ出力します。

  関数変更() {
   状態.値.最初.b = 8
   状態.値.最初.2番目.c = 9
   // 値を変更したら、ビューを駆動してtriggerRef(state)をすぐに更新します
   console.log(状態);
  }

  {状態、変更} を返す
 }
}
</スクリプト>

<スクリプト>
'vue' から {reactive, toRaw} をインポートします。
エクスポートデフォルト{
 設定（） {
  定数オブジェクト = {
   名前: 「フロントエンドインプレッション」
   年齢: 22
  }

  定数状態 = リアクティブ(obj) 
  定数raw = toRaw(状態)

  console.log(obj === raw) // 真
 }
}
</スクリプト>

<テンプレート>
 <p>{{ 状態名 }}</p>
 <p>{{ 状態.年齢 }}</p>
 <button @click="change">変更</button>
</テンプレート>

<スクリプト>
'vue' から {reactive, markRaw} をインポートします。
エクスポートデフォルト{
 設定（） {
  定数オブジェクト = {
   名前: 「フロントエンドインプレッション」
   年齢: 22
  }
  // 元のデータ obj を markRaw でマークして、データの更新が追跡されないようにする const raw = markRaw(obj) 
  // レスポンシブデータにするために、raw を reactive でラップします。const state = reactive(raw) 

  関数変更() {
   状態.年齢 = 90
   コンソールにログ出力します。
  }

  {状態、変更} を返す
 }
}
</スクリプト>

<スクリプト>
'vue' から {reactive, watchEffect} をインポートします。
エクスポートデフォルト{
 設定（） { 
   const 状態 = リアクティブ({ カウント: 0、名前: 'zs' })

   ウォッチエフェクト(() => {
   コンソールログ(状態数)
   console.log(状態名)
   /* 初期化中に印刷:
     0
     ず

   1 秒後に次のように出力されます:
     1
     ls
   */
   })

   タイムアウトを設定する(() => {
   状態.count++
   状態名 = 'ls'
   }, 1000)
 }
}
</スクリプト>

<テンプレート>
 <p>{{ 数値 }}</p>
</テンプレート>
<スクリプト>
'vue' から {ref, getCurrentInstance} をインポートします。
エクスポートデフォルト{
 設定（） { 
  定数num = ref(3)
  定数インスタンス = getCurrentInstance()
  console.log(インスタンス)

  {num} を返す
 }
}
</スクリプト>

// ストアフォルダ内のindex.js
'vuex' から Vuex をインポートします

const ストア = Vuex.createStore({
 州： {
  名前: 「フロントエンドインプレッション」
  年齢: 22
 },
 突然変異:
  …
 },
 …
})

// 例.vue
<スクリプト>
// vuex から useStore メソッドをインポートします。import {useStore} from 'vuex'
エクスポートデフォルト{
 設定（） { 
  // vuexインスタンスを取得する const store = useStore()

  コンソール.log(ストア)
 }
}
</スクリプト>