Vue 3ドキュメントのまとめ-上級ガイド-応答性

上級ガイド
おうとうじょうたい

reactive:深層変換-オブジェクトを変換するために使用され、dataオプションで返されるオブジェクト

refは、valueプロパティを介して内部値

にアクセスする独立した応答オブジェクトを作成する.

refテンプレートで使用すると、元の値

に自動的に展開されます.

refがreactiveパラメータオブジェクトに存在する場合、自動的に元の値に展開されます.reactiveのパラメータは必ず元のオブジェクトでなければなりません.配列、またはmapのような集合タイプ

ではありません.

 setup() {
     
    const myRef = ref(0)
    const myReactive = reactive({
     myRef})
    console.log(myReactive.myRef) // 0
    myReactive.myRef = 1
    console.log(myRef.value) // 1
  }

reactiveで作成されたレスポンスオブジェクトが解体されると、レスポンスプロパティが失われます.解決策はまずtoRefsによって一連のRefに変換してから解離することである(toRefは解離1つであり,2つのパラメータが必要であり,toRefsは1組を処理する.)

readonlyを使用して応答オブジェクトの変更を防止する

レスポンスステータスリスニング、計算
computed

プロパティcomputedを計算し、関数(getter)を受け入れます.getとsetを含むオブジェクトパラメータも受け入れます.その値

にRefでアクセスする.
watchEffect

watchEffectは、変更に依存して副作用を再実行する.依存パラメータを代入する必要がなく、直ちに実行するのが特徴です.リスニングを停止する関数

を返します.

  setup() {
     
    const myRef = ref(0);
    onMounted(() => {
     
      setInterval(() => {
     
        myRef.value = myRef.value + 1;
      }, 1000);
    });
    const stopWatch = watchEffect(() => {
     
      console.log(myRef.value);
      if (myRef.value > 3) {
     
        stopWatch();
      }
    });

しかしwatchEffectで非同期の副作用であれば,戻り関数で傍受を停止しても非同期動作はトリガされる.watchEffectをクリアしながら非同期副作用をクリアできる関数が必要です.watchEffectはonInvalidateパラメータを用いてこの問題を解決する

***onInvalidateパラメータは、傍受を停止するときに、未完了の副作用を除去するためのである.
***リスニングと同様に、停止イベントがリスニングされると、以前に収集された関数が実行されます.
***通常、副作用が実行される前に、この値を設定します.
onInvalidateリスニング関数が設定されていない場合は、4まで停止します.傍受を停止するとeffectが実行されるので

setup() {
     
   let timer = null;
   const data = ref(0);

   //          
   const effect = () => {
     
     timer = setTimeout(() => {
     
       data.value = data.value + 1;
     }, 1000);
   };
   //    data.value === 3      ，                      
   const stop = watchEffect((onInvalidate) => {
     
     effect();
     if (data.value === 3) {
     
       stop();
     }
   });
   return {
      data };
 },

onInvalidateリスニングが設定されている場合、3になると停止します.関数に副作用を消す関数を書く

setup() {
     
    let timer = null;
    const data = ref(0);

    //          
    const effect = () => {
     
      timer = setTimeout(() => {
     
        data.value = data.value + 1;
      }, 1000);
    };
    //    data.value === 3      ，                      
    const stop = watchEffect((onInvalidate) => {
     
      onInvalidate(() => {
     
        clearTimeout(timer);
      });
      effect();

      if (data.value === 3) {
     
        stop();
      }
    });
    return {
      data };
  },

ユーザー定義の更新がキューに入ると、デフォルトではコンポーネントの更新前に実行されます.コンポーネントの更新後にいくつかの副作用を実行するには、flushオプション付きの追加optionsオブジェクト(デフォルトは「pre」)

を代入します.

<template>
  <h1 v-for="item in data" :key="item">{
    { item }}h1>
template>

  setup() {
     
    const data = ref([]);
    const index = ref(0);
    onMounted(() => {
     
      setInterval(() => {
     
        index.value = index.value + 1;
        data.value[index.value] = index.value;
      }, 2000);
    });
    watchEffect(
      () => {
     
        const idx = index.value;
        const dom = document.getElementsByTagName("h1");
        console.log(dom[idx]); //    {flush： 'post'}          
      },

    );

    return {
      data };
  },

リスナーデバッグ:onTrack、onTriggerは、依存情報を含むデバッガイベントを受け入れます.開発モードでしか動作しない

watchEffect(
  () => {
     
    const idx = index.value;
    const dom = document.getElementsByTagName("h1");
    console.log(dom[idx]);
  },
  {
     
    flush: "post",
    onTrack(e) {
     
      console.log(e.target.value);
    },
  }
);

watch

vue 3 watch APIはvue 2 watchと完全に同等であり、書き方とパラメータが若干異なる

watchは、特定のデータソースをリスニングする必要があります.コールバック関数での副作用

の実行

watchはwatchEffectと比較して、watchは不活性な

である.

watchリスニングは、関数形式のreactiveの値であってもよいし、ref,computed等の

であってもよい.

watchコールバック関数ではrefの元の値を直接取得できます.

reactiveをリスニングする場合は、関数内でリスニングする値を返します.コールバック関数のパラメータは、reactive構造全体のproxy

ではなく、リスニングされた値です.

はwatchEffectと共にリスニングを停止し、副作用(それに応じてonInvalidateがコールバックの3番目のパラメータとして入力)、副作用リフレッシュタイミング、およびリスナーデバッグ動作

をクリアする.
データ・ソースの傍受

setup() {
     
    const index = ref(0);
    onMounted(() => {
     
      setInterval(() => {
     
        index.value = index.value + 1;
      }, 2000);
    });
    watch(index, (val, preVal) => {
     
      console.log("current", val); //            

      console.log("pre value", preVal);
    });

    return {
      index };
  },

複数のデータ・ソースのリスニング

  setup() {
     
    const index = ref(0);
    const char = ref(100);
    onMounted(() => {
     
      setInterval(() => {
     
        index.value = index.value + 1;
        char.value--;
      }, 2000);
    });
    watch([index, char], ([index, char], [preIndex, preChar]) => {
     
      console.log("current index", index);
      console.log("current char", char);

      console.log("--------");
      console.log("pre index", preIndex);
      console.log("pre char", preChar);

      console.log("-------next loop--------------");

    });

    return {
      index, char };

リスニングreactive

  setup() {
     
    const index = reactive({
     
      value: 0,
    });
    onMounted(() => {
     
      setInterval(() => {
     
        index.value = index.value + 1;
      }, 2000);
    });
    watch(
      () => index.value,
      (val, preVal) => {
     
        console.log("current index", val);
        console.log("pre index", preVal);

        console.log("-------next loop--------------");
      }
    );

    const {
      value } = toRefs(index);
    return {
      value };
  },

reactiveと共有する動作(副作用をクリアする例)

  setup() {
     
    const index = reactive({
     
      value: 0,
    });
    let timer = null;

    const effect = () => {
     
      timer = setTimeout(() => {
     
        index.value = index.value + 1;
        console.log("interval", index.value);
      }, 1000);
    };
    effect(); //               watch
    const stop = watch(
      () => index.value,
      (val, preVal, onInvalidate) => {
     
        onInvalidate(() => {
     
          clearTimeout(timer);
        });

        effect();

        if (val === 3) {
     
          stop();
        }
      }
    );

    const {
      value } = toRefs(index);
    return {
      value };
  },