Vue.jsで入れ子のデータのwatch(監視)の方法

こんにちは、さるまりんです。

今回はフロントです。Vue.jsです。

watchでプロパティの変化を監視することができます。
こんな感じです。

data:{
    propertyName: "値"
},
watch:{
  propertyName: function(oldValue, newValue) {
    // 変化があった時の処理をここに
  }
}

functionを省略して書くこともできます。

watch:{
  propertyName(oldValue, newValue) {
    // 変化があった時の処理をここに
  }
}

こんなオブジェクトがあったとします。

data: {
    person: {
        mame: "salumarine",
        age: 20,
        address: {
           city: "New York",
           state: "NY"
        } 
    }
}

誕生日がきてageが変化します。
それを監視するには

watch:{
    age(oldVal, newVal) {
        console.log("age changed from " + oldVal + " to " + newVal + " Happy birthday!");
    }
}

のようにできます。

では引越ししてaddressが変化するのは？

addressは入れ子(nested)になっています。

watch:{
    'address.city'(newVal) {
    }
}

こんな風に'address.city'と入れ子の要素を指定してあげることができます。

こんな書き方もあります。

watch:{
    person: {
        handler(val) {
           // 処理をここに
        },
        deep: true
    }
}

こうするとpersonのどの要素に変化が起こってもhandlerが実行されます。

すべての変化で処理が走るのが嫌な場合もありますよね。何もしないでいいこともありますし。

そんな時はこうします。

computed:{
    city() {
        return this.person.city;
    },
    state() {
        return this.person.state;
    }
},

と、computedでperson.cityとperson.stateを返すようにしておき、

watch:{
    city() {
        // cityが変わった時の処理をここに
    },
    state() {
        // stateが変わった時の処理をここに
    }
}

とそれを監視するようにします。

同じことをするにもいろんな方法がありますね。

最近、ちょこちょことVue.jsを触ることが増えてきました。
ってちょっと遅いかもしれないですね。
わからないことまだまだなので、いろいろ勉強していきたいと思います。

読んでくださってありがとうございました。

それではまた！