ホームページ >ウェブフロントエンド >Vue.js >Comboposition API と Vue3 でのその中心的な使用法の紹介
Vue3 での Comboposition API の中心的な使用法
Composition API とは何ですか?
Composition API は結合 API とも呼ばれます。 Vue3.x の新機能。 Vue コンポーネントを作成することで、インターフェイスの繰り返し可能な部分を再利用可能なコード セグメントに抽出できます。Composition API が登場する前は、Vue 関連のビジネス コードをオプションの特定の領域に設定する必要がありました。大規模なプロジェクトでは後々問題が発生する メンテナンスが比較的煩雑でコードの再利用性が低い この問題を Vue3 の Comboposition API が解決します。
ref と reactive を使用してセットアップでレスポンシブ データを定義する
ref と reactive を使用してデータを定義する前に、データを vue から分解する必要があります。
import {ref,reactive} from 'vue';
ref と reactive の両方でレスポンシブ データを定義できます。定義されたデータは Vue テンプレートで直接取得できます。ただし、メソッド経由で取得する場合、ref と reactive で定義されたデータの取得には特定の違いがあります。 reactive.ref 定義されたデータはvalue属性で間接的に取得する必要があり、reactiveで定義されたデータは直接取得できますが、これら2種類のデータを変更する場合も同様です。
export default { setup() { // 使用ref定义响应式数据 const title = ref("这是一个标题"); // 使用reactive定义响应式数据 const userinfo = reactive({ username: "张三", age: 20 }); // 获取reactive中的属性可以直接获取 const getUserName = () => { alert(userinfo.username) }; // 获取ref中的数据需要通过value属性 const getTitle = () => { alert(title.value) }; const setUserName = () => { // 修改reactive中的属性可以直接修改 userinfo.username = "修改后的张三" }; const setTitle = () => { // 修改ref中的属性,需要通过value title.value = "这是修改后的标题" }; return { title, userinfo, getUserName, getTitle, setTitle, setUserName } }, data() { return { msg: "这是Home组件的msg" } }, methods: { run() { alert('这是Home组件的run方法') } } }
v-model を使用して、双方向のデータ バインディングを直接実行できます。
<input type="text" v-model="title"> <input type="text" v-model="userinfo.username">
toRefs は応答性の高いオブジェクト データを分解します
toRefs が必要な理由は、toRefs によって分解されたデータにも応答性の特性があり、従来の展開演算子によって処理されるためです。には応答性の特性がないため、toRefs が必要になります。
vue から toRefs を分解します
import {ref,reactive,toRefs} from 'vue';
setup の戻りデータに次の変更を加えます
return { title, userinfo, getUserName, getTitle, setTitle, setUserName, ...toRefs(article) }
setup で計算された属性#セットアップで計算されるプロパティは、一般的な計算プロパティと似ていますが、読み取ることができない点が異なります。
setup() { let userinfo = reactive({ firstName: "", lastName: "" }); let fullName = computed(() => { return userinfo.firstName + " " + userinfo.lastName }) return { ...toRefs(userinfo), fullName } }readonly: ディープ読み取り専用プロキシ
readonly の意味は、応答性の高いオブジェクトを通常のプリミティブ オブジェクトに変換できることです。
読み取り専用の導入。
import {computed, reactive,toRefs,readonly} from 'vue'
応答オブジェクトを読み取り専用に渡します。
let userinfo = reactive({ firstName: "666", lastName: "" }); userinfo = readonly(userinfo);セットアップの watchEffect
セットアップの watchEffect には次の特性があります。
セットアップでデータの変更を監視できます。データが変更されると、watchEffect のコールバック関数が実行されます。
セットアップ内のデータはリアルタイムでは変更されず、最初に 1 回実行されます。
setup() { let data = reactive({ num: 1 }); watchEffect(() => { console.log(`num2=${data.num}`); }); setInterval(() => { data.num++; },1000) return { ...toRefs(data) } }セットアップでの監視
監視を使用してデータを監視する基本的な方法。
setup() { let keyword = ref("111"); watch(keyword,(newData,oldData) => { console.log("newData是:",newData); console.log("oldData是:",oldData); }) return { keyword } }watch と watchEffect の違い
ページが初めてレンダリングされるとき、watch は実行されませんが、watchEffect は実行されます。
watchはデータの状態が変化する前後の値を取得できます。
セットアップのライフ サイクル フック関数
セットアップのライフ サイクル フックは、関数を直接呼び出すのと似ています。
setup() { let keyword = ref("111"); watch(keyword,(newData,oldData) => { console.log("newData是:",newData); console.log("oldData是:",oldData); }) onMounted(() => { console.log('onMounted'); }) onUpdated(() => { console.log('onUpdated'); }) return { keyword } }
セットアップのプロパティ
親コンポーネントは値を渡します。
<Search :msg="msg" />
StatementReceive
props: ['msg'], setup(props) { console.log(props); }Provide and inject
親コンポーネントから子コンポーネントにデータを渡す必要がある場合がありますが、親コンポーネントがサブコンポーネントは入れ子の関係が深く、propsを通すのが面倒になるので、provideとinjectを使うことで実現できます。
#一般的な使用法export default { data() { return { } }, components: { Home }, provide() { return { title: "app组件里面的标题" } } }データを受信する必要があるコンポーネントは、inject ステートメントを通じてデータを受信します。
export default { inject: ['title'], data() { return { } }, components: { } }ステートメントを受信した後は、直接使用できます。
<template> <div class="container"> 这是Location组件 {{title}} </div> </template>provide は、この
export default { data() { return { title: "根组件的数据" } }, components: { Home }, provide() { return { title: this.title } } }でデータを取得できます。 注: 上記の一般的な使用法では、親コンポーネントのデータが発生した場合に変更が発生しますサブコンポーネント内の内容は変更されないため、同期的な変更を実現するには、以下の合成 API で Provide および Inject を使用することをお勧めします。
セットアップでの提供と注入
ルート コンポーネント
import Home from './components/Home.vue' import {ref,provide} from 'vue' export default { setup() { let title = ref('app根组件里面的title'); let setTitle = () => { title.value = "改变后的title" } provide("title",title); return { title, setTitle } }, data() { return { } }, components: { Home } }データを使用するコンポーネント
import {inject} from 'vue' export default { setup() { let title = inject('title'); return { title } }, data() { return { } }, components: { } }プロパティとの違いは、双方向データ バインディングが使用されている場合、子コンポーネントのデータは親コンポーネントに同期されます。
推奨学習: 「
最新の 5 つの vue.js ビデオ チュートリアル セレクション」
以上がComboposition API と Vue3 でのその中心的な使用法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。