Vue3 のウォッチの使用方法とベストプラクティスガイド

watch(WatcherSource, コールバック, [WatchOptions])

WatcherSource<T> = Ref<T> | (() => T) 型

インターフェース WatchOptions は WatchEffectOptions を拡張します {
    deep?: boolean // デフォルト: false
  即時?: ブール値 // デフォルト: false
  
}

<テンプレート>
  <div class="watch-test">
    <div>名前：{{name}}</div>
    <div>年齢:{{年齢}}</div>
  </div>
  <div>
    <button @click="changeName">名前の変更</button>
    <button @click="changeAge">年齢を変更</button>
  </div>
</テンプレート>

<スクリプト>
  'vue' から {ref, watch} をインポートします。

  エクスポートデフォルト{
    名前: 'ホーム'、
    設定（） {

      const name = ref('小松楠奈')
      定数年齢 = ref(25)

      const watchFunc = watch([名前, 年齢], ([名前, 年齢], [前の名前, 前年齢]) => {
        console.log('新しい名前', 名前, '古い名前', 前の名前)
        console.log('newAge', age, 'oldAge', prevAge)
        （年齢＞26）の場合
          watchFunc() // 監視を停止}
      },{即時:true})

      定数changeName = () => {
        name.value = '有村架純'
      }
      定数changeAge = () => {
        年齢.値 += 2
      }
      戻る {
        名前、
        年、
        名前の変更、
        年齢変更
      }
    }
  }
</スクリプト>

<テンプレート>
  <div class="watch-test">
    <div>ref は配列を定義します: {{arrayRef}}</div>
    <div>リアクティブ定義配列: {{arrayReactive}}</div>
  </div>
  <div>
    <button @click="changeArrayRef">参照定義配列の最初の項目を変更します</button>
    <button @click="changeArrayReactive">リアクティブ定義配列の最初の項目を変更します</button>
  </div>
</テンプレート>

<スクリプト>
  'vue' から {ref, reactive, watch} をインポートします。

  エクスポートデフォルト{
    名前: 'WatchTest',
    設定（） {
      定数配列Ref = ref([1, 2, 3, 4])
      定数配列Reactive = リアクティブ([1, 2, 3, 4])

      //参照が深くない
      const arrayRefWatch = watch(arrayRef, (newValue, oldValue) => {
        console.log('newArrayRefWatch', 新しい値, 'oldArrayRefWatch', 古い値)
      })

      //参照深度
      const arrayRefDeepWatch = watch(arrayRef, (newValue, oldValue) => {
        console.log('newArrayRefDeepWatch', 新しい値, 'oldArrayRefDeepWatch', 古い値)
      }, {deep: true})

      // リアクティブ、ソースは関数ではありません const arrayReactiveWatch = watch(arrayReactive, (newValue, oldValue) => {
        console.log('newArrayReactiveWatch', 新しい値, 'oldArrayReactiveWatch', 古い値)
      })

      // 配列監視のベストプラクティス - リアクティブとソースは関数的な方法で戻り、コピーされたデータを返します const arrayReactiveFuncWatch = watch(() => [...arrayReactive], (newValue, oldValue) => {
        console.log('newArrayReactiveFuncWatch', 新しい値, 'oldArrayReactiveFuncWatch', 古い値)
      })

      定数changeArrayRef = () => {
        配列参照値[0] = 6
      }
      定数changeArrayReactive = () => {
        配列Reactive[0] = 6
      }
      戻る {
        配列参照、
        アレイリアクティブ、
        配列参照の変更、
        配列リアクティブの変更
      }
    }
  }
</スクリプト>

<テンプレート>
  <div class="watch-test">
    <div>ユーザー:{</div>
      <div>名前:{{objReactive.user.name}}</div>
      <div>年齢:{{objReactive.user.age}}</div>
    <div> </div>
    <div>ブランド:{{objReactive.brand}}</div>
    <div>
      <button @click="changeAge">年齢を変更</button>
    </div>
  </div>
</テンプレート>

<スクリプト>
  'vue' から {ref, reactive, watch} をインポートします。
  'lodash' から _ をインポートします。

  エクスポートデフォルト{
    名前: 'WatchTest',
    設定（） {
      const objReactive = reactive({user: {name: '小松菜奈', age: '20'}, brand: 'Channel'})

      // リアクティブソースは関数です const objReactiveWatch = watch(() => objReactive, (newValue, oldValue) => {
        コンソールログ('objReactiveWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      })

      // リアクティブ、ソースは関数、deep: true
      const objReactiveDeepWatch = watch(() => objReactive, (newValue, oldValue) => {
        コンソールログ('objReactiveDeepWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      }, {deep: true})

      // オブジェクトのディープウォッチングのベストプラクティス - リアクティブとソースは関数的な方法で戻り、ディープコピーされたデータを返します const objReactiveCloneDeepWatch = watch(() => _.cloneDeep(objReactive), (newValue, oldValue) => {
        コンソールログ('objReactiveCloneDeepWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      })

      定数changeAge = () => {
        objReactive.user.age = 26
      }

      戻る {
        objReactive、
        年齢変更
      }
    }
  }
</スクリプト>