Vue数组侦听

什么是侦听器？

Vue侦听器是提供给开发者可以用来监测某些数据的变化，从而针对这些数据的变化进行某些操作。

但是要注意：侦听器本质上是一个函数，如果要监听哪一个数据的变化，就把那个数据作为函数名

Vue侦听器的基本语法

Vue侦听器提供了两种语法格式。一种是方法格式的写法，另一种是对象格式的写法。

方法格式的侦听器

 var vm = new Vue({

            el: "#app",

            data: {

                username: ''

            },

            // 所有的侦听器，都定义在watch节点下

            // 侦听器本质上是一个函数，要监视哪一个数据，就把哪一个数据作为函数名

            watch: {

                username(newval, oldval) {

                   // newval表示：变化后的新值；oldval表示：变化前的旧值

                    console.log(newval, oldval);

                }

            }

        })

方法格式的监听器有两个缺点：

1）首次进入浏览器的时候，无法立即触发一次侦听器

2）如果侦听的是一个对象，对象里面的数据发生了变化，并不会出发侦听器

对象格式的侦听器

const vm = new Vue({
  el: '#app'
  data: {
    msg: '杉杉'
  },
  watch: {
    msg: {
      handler () {
        console.log('msg的值改变啦');
      }
    }
  }
})
vm.msg = 'hello'; // 此时回调函数会执行，控制台中打印出 ` msg的值改变啦 `

对象格式的侦听器有两个优点：

1）可以通过immediate属性，控制侦听器自动触发一次（默认是false）

2）可以 通过deep属性，控制侦听器深度监听到对象中每一个属性的变化

vue深度侦听

var vm = new Vue({
            el: "#app",
            data: {
                info: {
                    username: 'liupeng'
                }
            },
            // 所有的侦听器，都定义在watch节点下
            // 侦听器本质上是一个函数，要监视哪一个数据，就把哪一个数据作为函数名
            watch: {
                // info: {
                //     handler(newval) {
                //         console.log(newval);
                //     },
                //     // 开启深度监听，只要对象中任何一个属性变化了，都会触发对象的侦听器
                //     deep: true
                // }
                // 如果想要侦听对象里某一个子属性的变化，可以通过''单引号进行包裹
                'info.username' (newval) {
                    console.log(newval);
                }
            }
        })