vue3.0プロジェクト作成及びAPI説明(一)

一、プロジェクトの作成
1、vue-cli足場バージョン(vue-V)をチェックし、低バージョンの更新(npm install@vue/cli-g)

2、プロジェクトの作成(vue create vue 3 test)

default(ダイレクトリターンenter)を選択し、プロジェクトを初期化

3、プロジェクトフォルダに入り、vueバージョン(vue add vue-next)を更新する

4、プロジェクトの実行(npm run serve)

5、ブラウザへのアクセス(http://localhost:8081)、ページの表示を初期化
二、Vue 3 API

    vue3        、     API，              。  ：  ref  ：import { ref} from 'vue'

1、setup関数
オブジェクトを返すと、オブジェクトのプロパティがコンポーネントテンプレートのレンダリングコンテキストにマージされます.他のすべての導入関数は、その内部で実行する必要があります.コンポーネントインスタンスを作成し、propsを初期化し、setup関数を呼び出します.ライフサイクルフックの観点からbeforeCreateフックの前に呼び出されます

<script>
export default {
    setup(){
        console.log("steup")
    },
    beforeCreate(){
        console.log("beforeCreate")
    },
    created(){
        console.log("created")
    }

}
</script

ブラウザの印刷順序:
2、応答式システムAPI
(1)、ref
パラメータ値を受け入れ、応答式で変更可能なrefオブジェクトを返します.refオブジェクトは、内部値を指す単一の属性を有する.value.主に数値、文字列の作成に使用されます.refオブジェクトの値を動的に変更する場合に利用する必要がある.valueは修正します.しかしsetupが返すrefはテンプレートで自動的に解け、書く必要はない.value. ボタンをクリックすると、展示されているnumの値が9999になります

<template>
  <div class="hello">
      <p>{{num}}</p>
      <p>{{str}}</p>
    <button @click="onChange">  num</button>
  </div>
</template>
<script>
  import {ref} from 'vue'
export default {
    setup(){
        let num = ref(333)
        let str = ref('fffff');
        let onChange = ()=>{
            num.value = 9999;
        }
        return{
            num,
            str,
            onChange
        }
    }
}
</script>

(2)、reactive
通常のオブジェクトを受信し、その通常のオブジェクトの応答エージェントに戻ります.

<template>
  <div class="hello">
    <p>{{obj.name}}</p>
    <button @click="onChange">  name</button>
  </div>
</template>
<script>
    import {reactive} from 'vue'
    export default {
        setup(){
            let obj = reactive({
                name:'tom',
                age:20
            });
            let onChange = ()=>{
                obj.name = "Json";
            }
            return{
                obj,
                onChange
            }
        }
    }
</script>

(3)、computed
getter関数を入力し、デフォルトで手動で変更できないrefオブジェクトを返します.ボタンをクリックするとproNumは変わりません.ブラウザから「Write operation failed:computed value is readonly」というメッセージが表示されます.

<template>
  <div class="hello">
    <p>{{proNum}}</p>
    <button @click="onChange">  proNum</button>
  </div>
</template>
<script>
    import {ref,computed} from 'vue'
    export default {
        setup(){
            const num = ref(5)
            const proNum = computed(() => num.value + 1)
            let onChange = ()=>{
                proNum.value += 10;
            }
            return{
                proNum,
                onChange
            }
        }
    }
</script>

computedで値を変更できる場合は、get関数とset関数を持つオブジェクトを入力し、手動で変更可能な計算ステータスを作成する必要があります.

<template>
  <div class="hello">
    <p>{{num}}</p>
    <button @click="onChange">  proNum</button>
  </div>
</template>
<script>
    import {ref,computed} from 'vue'
    export default {
        setup(){
            const num = ref(1)
            const proNum = computed({
                set:(val)=>{
                    num.value = val+10;
                },
                get:()=>num.value
            })
            let onChange = ()=>{
                proNum.value = 10;
                console.log(num)
            }
            return{
                num,
                onChange
            }
        }
    }
</script>

(4)、readonly
オブジェクト(応答式または通常)またはrefを入力し、元のオブジェクトの読み取り専用エージェントを返します.読み取り専用のエージェントは「深層」であり、オブジェクト内のネストされたプロパティも読み取り専用です.ボタンをクリックすると、ブラウザに「Set operation on key“value”failed:target is readonly」というメッセージが表示されます.

<template>
  <div class="hello">
    <p>{{readNum}}</p>
    <button @click="onChange">  readNum</button>
  </div>
</template>
<script>
    import {ref,readonly} from 'vue'
    export default {
        setup(){
            const num = ref(1)
           let readNum = readonly(num)
            let onChange = ()=>{
                readNum.value = 10;
            }
            return{
                readNum,
                onChange
            }
        }
    }
</script>

(5)、watch
特定のデータソースをリスニングし、コールバック関数で副作用を実行する必要があります.デフォルトでは、コールバックは、リスニングされたデータ・ソースの変更時にのみ実行されます.

<template>
  <div class="hello">
    <p>{{num}}</p>
    <p>{{state.name}}</p>
    <button @click="onChange">  num-name</button>
  </div>
</template>
<script>
    import {ref,reactive,watch} from 'vue'
    export default {
        setup(){
            //      reactive       
            const state = reactive({ name: 'tom' });
            watch(
                () => state.name,
                (name, prevName) => {
                    console.log(prevName,name)
                }
            );
            //        ref        
            const num = ref(1);
            watch(num, (num, prevNum) => {
               console.log(prevNum,num)
            });

            //        
            watch([num,state], ([num,name], [prevNum,prevName]) => {
                console.log(prevNum,num+"-----"+prevName.name,name.name)
            });
            let onChange = ()=>{
                state.name = 'Json';
                num.value =  10;
            };
            return{
                state,
                num,
                onChange
            }
        }
    }
</script>

(6)、watchEffect
すぐに入力された関数を実行し、応答式で依存を追跡し、依存変更時に関数を再実行します.

<template>
  <div class="hello">
    <p>{{num}}</p>
  </div>
</template>
<script>
    import {ref,watchEffect} from 'vue'
    export default {
        setup(){
            const num = ref(1);
            const stop = watchEffect(()=>{
                console.log(num.value)
            })
            setTimeout(()=>{
                num.value = 10
            },2000)
            
            //         stop          10
            stop();
            return{
                num
            }
        }
    }
</script>

三、ライフサイクルフック関数

  2.x               API
beforeCreate ->    setup()
created ->    setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

これらのライフサイクルフック登録関数は、setup()中に同期してのみ使用できます.内部のグローバル状態に依存して、現在のコンポーネントインスタンス(setup()を呼び出しているコンポーネントインスタンス)を特定し、現在のコンポーネントの下でこれらの関数を呼び出さないとエラーが発生します.コンポーネントインスタンスコンテキストも、ライフサイクルフックの同期実行中に設定されるため、コンポーネントをアンインストールすると、ライフサイクルフックの内部で同期して作成されたリスナーと計算ステータスも自動的に削除されます.

<template>
  <div class="hello">
    <p>{{num}}</p>
    <button @click="onChange">  num</button>
  </div>
</template>
<script>
    import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
    export default {
        setup(){
            onBeforeMount(() => {
                console.log('onBeforeMount!')
            });
            onMounted(() => {
                console.log('mounted!')
            });
            onBeforeUpdate(() => {
                console.log('onBeforeUpdate!')
            });
            onUpdated(() => {
                console.log('updated!')
            });
            onBeforeUnmount(() => {
                console.log('onBeforeUnmount!')
            });
            onUnmounted(() => {
                console.log('unmounted!')
            });
            const num = ref(1);
            let onChange = ()=>{
                num.value = 10;
            };
            return{
                num,
                onChange
            }
        }
    }
</script>

公衆番号(web学習バー)に注目して、一緒に勉強して進歩します: