vue3のwatchとwatchEffect – 値の監視

vue3でコンポーネントの値を監視して、変化があったときに実行する機能。watchは指定した値のみ、watchEffectはpropsやref内のなにかが変化したときに実行される。watchは変化した前後の値も参照できる。

import {watch, watchEffect,ref} from 'vue';
export default {
  props : {
    value1 : {
      type:String,
      default:''
    },
    value2 : {
      type:String,
      default:''
    },
    setup(){
      const value3 = ref(false);

      watch(value1, (newval, oldval)=>{
        /*value1が変わったときの処理*/ 
      });

      watchEffect( ()=>{
        /*value1~3のどれかが変わったときの処理*/
      } );

    }
  }
}