侦听的值发生改变的时候触发

  1.  <div id="app">
  2.         <div>{{sum}}</div>
  3.     </div>
  4.     <script>
  5.         var vm = new Vue({
  6.             el: "#app",
  7.             data: {
  8.                 num1: 1,
  9.                 num2: 2,
  10.                 sum: 3
  11.             },
  12.             watch: {
  13.                 /* 侦听num1的改变 */
  14.                 num1: function () {
  15.                     this.sum = this.num1 + this.num2
  16.                 }
  17.             }
  19.         })

1-1 深度监听

<div id="app">
        <div v-for="item of arr">
            <input type="checkbox"
             v-model="item.isState">{{item.name}}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
               arr:[
                   {name:"html",isState:false},
                   {name:"css",isState:false},
                   {name:"js",isState:false}
               ],

            },
            watch:{
                arr:{
                    handler(val){
                        console.log(val)
                    },
                    deep:true
                }
            }
        })
    </script>