【Vue.js】監視プロパティのオプション deep

はじめに

こんにちは！
今回は【Vue.js】監視プロパティのオプション　deepについてアウトプットしていきます！

deepとは

deepとは、ネストされたオブジェクトも監視するためのオプション

書き方・解説

HTML

<div id="app">
  <ul>
    <li v-for="color in colors">
      {{ color.name }}
    </li>
  </ul>
</div>

Vue.js

 var app = new Vue({
   el: "#app",
   data: {
     colors: [
       {name: 'Red'},
       {name: 'Green'},
       {name: 'Blue'}
     ]
   },
   watch: {
     colors: {
       handler: function(newValue, oldValue) {
       console.log('Update!')
       },
       deep:true
     }
   }
 })

colorsの部分がリスト表示されました。
そしたらデベロッパーツール👉consoleを開きます。Greenの部分をWhiteにします。
consoleにapp colors[1].name='white'と記述しenterをクリックすると以下のようになります。

Update!と表示されているのはVue.js内でdeep:trueと記述しているからです。
これがdeep:falseまたは未記入だと出力されません。（deep:falseまたは未記入でもapp colors[1].name='white'の効果は有力であり、しっかり反映されます。）

まとめ

・deepオプションはネストされたオブジェクトを監視する役割をはたしています。
true＝実行
false＝実行しない
未記入＝実行しない

最後に

今回は監視プロパティのオプション　deepについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！