vue3.0

vue3

アップグレード方法

1. Scaffoldingで作成されたvue2 ルートnpmディレクトリにvue3プラグインをインストールする必要があります。

 npm install --save @vue/composition-api //ルート・ディレクトリの実行
yarn add @vue/composition-api //ルート・ディレクトリの実行
// main.ts
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)

comPosition(CompositionApi)

setup

デフォルトの2つのパラメータ

1. props
   1. propsパラメータは入力されるすべてのpropsのコンポーネントとして受け入れられますが、propsを受け入れるためにpropsフィールドを書く必要があります。
2. コンテキスト context
   1. thisはありません（コンテキストは第2引数に置かれます）

reactive

を実行することなく、オブジェクトをデータ応答オブジェクトとして処理します。

import { reactive } from "vue";
export default {
 setup() {
 const userInfo=reactive({userName:"フック"});
 return {
 userInfo
 };
 },
};

ref

レスポンシブデータオブジェクトとして作成される値に基づいています。

1. 設定値はxxでなければなりません。.value
2. 値をreturn!!

 setup(props, { attrs, emit, isServer, listeners, parent, refs, root, slots, ssrContext }) {
 const user = reactive({
 name: ' '
 })
 const city = ref('私は東京にいない。')
 const getUserCity=()=>{
 city.value=" ;
 }
 return {
 user, // レスポンシブデータのリアクティブ処理後。
 city,
 getUserCity
 }

isRef( isProxy, isReactive, isReadonly)

isRef()は、値がref()で生成されたオブジェクトかどうかを判定するために使用します。

toRefs

マルチレイヤーのレスポンシブオブジェクトをリアクティブから通常のレスポンシブデータに変換

 setup(props, { attrs, emit, isServer, listeners, parent, refs, root, slots, ssrContext }) {
 const torefsTest = reactive({
 fix:2
 })
 return {
 ...toRefs(torefsTest), // リアクティブを通常のレスポンシブデータにマルチレイヤーのレスポンシブオブジェクトに変換する。
 }
 }

computed

computed() 計算属性を渡します 読み取り専用の計算属性を取得する関数関数を渡します get set 関数をカスタマイズするオブジェクトを渡します レスポンシブな ref オブジェクトを返します

 let age = ref('111,読み取り専用プロパティ')
 // 5. computed
 // 関数を渡すと、読み取り専用のrefオブジェクトの値を返す オブジェクトを渡すと、そのオブジェクトの値を設定するget/setメソッドになる。
 let userAge = computed(function (){
 return ' ' + age.value
 })
 return {
 userAge
 }

watch

2番目のパラメータ：コールバック関数内のレスポンスオブジェクトは、レスポンスオブジェクトが変更された場合に応答をトリガします、デフォルトのトリガは深い監視です。3番目のパラメータ: コンフィグによってトリガされる関数は、監視の深さかどうかを変更することができます

 let stop = watch(age,()=>{
 console.log(' ' + age.aa); // ここでは.value
 return age.aa
 },{lazy:false})
 return {
 stop
 }

複数のオブジェクトをリスニングするには配列を渡しますが、ドキュメントは同じではないのでうまくいきません。

注射

provide() と inject() は共通のデータを共有し、複数レベルのコンポーネントのデータ受け渡しを行います。親コンポーネントは provide() を使用してデータを渡します。

1. 孫コンポーネントで変更できる、祖父から孫に渡される属性。

 <template>
 <section>
 <div>孫コンポーネント</div>
 <img style="width:50px;height:50px" :src="pic"/>
 </section>
</template>
<script>
import { inject } from 'vue'
export default {
 setup() {
 //Aコンポーネントは、親コンポーネントから渡されたハンサム・アバターのデータを取得する。
 const pic = inject('pic')
 return {pic}
 },
};
</script>

サブアセンブリ

<template>
<section>
 <div> </div>
 <com-achild/>
</section>
</template>
<script>
import ComAchild from "./components/Achild.vue";
export default {
 components:{
 ComAchild,
},
};
</script>

グランドファーザー・コンポーネント

<template>
 <section>
 <com-a/>
 </section>
</template>
import ComA from "./components/A.vue";
import {provide,ref} from "vue";
const pic='https://../_//=,&;=&;=.pg'
export default {
 components:{
 ComA,
 },
 setup() {
 //親コンポーネントが共有データをバブリングする pic
 provide('pic',pic )
 //また、レスポンシブ・データの受け渡しもサポートしている。
 const pic = ref('pic');
 provide('pic',pic)
 },
};

ref

ref 内部関数とパラメータを使用したコンポーネントインスタンスの取得 Parent.html ファイル

 <Sunzi ref='comRef'></Sunzi>

parent.js

import Sunzi from './sunzi.vue'
export default {
 components: {
 Sunzi
 },
 setup(props,context) {
 // refcomPostionApi.componentインスタンスからメソッドをエクスポートし、使用する関数を取得する。
 const comRef = ref(null)
 onMounted(()=>{
 console.log(comRef.value.refComParams());
 console.log(comRef.value.yeye);
 })
 return {
 comRef
 }
 }
}

sub.jsは実際には関数であり、steup関数のreturn outで、子コンポーネントの親コンポーネントの実装後に内部の値を使用することができます。

 let refComParams = ()=>{
 // refコンポーネント・インスタンスで関数を試す
 return '子コンポーネントの関数が返す値は、親コンポーネントに渡して使ってもらう。'
 }
 return {
 yeye,
 changeyeye,
 refComParams
 }

customRef

参照オブジェクトを作成し、その取得セットトリガーの更新を制御し、応答する参照オブジェクトを返し、オブジェクト自体を返すことは、object.definedPropertyの使用方法の変更のように感じます。

<input v-model="text" />

function useDebouncedRef(value, delay = 200) {
 let timeout
 return customRef((track, trigger) => {
 return {
 get() {
 track()
 return value
 },
 set(newValue) {
 clearTimeout(timeout)
 timeout = setTimeout(() => {
 value = newValue
 trigger()
 }, delay)
 }
 }
 })
}
export default {
 setup() {
 return {
 text: useDebouncedRef('hello')
 }
 }
}

createComponent

コンポーネントを作成する場合、つまりページを作成する場合、comPostionApiからメソッドをエクスポートする必要があります。

	import {
 createComponent,
 onMounted,
 onUnmounted,
 reactive
} from '@vue/composition-api'
export default createComponent({
 name:'helloWorld',
 
})