关于Vue的侦听器的一些理解

1.什么是侦听器,是做什么的?

侦听器是用来检测数据变化从而添加自己自定义逻辑的代码,这一点和计算属性很相似,计算属性一般作用于简单的一些小逻辑代码,如果逻辑比较复杂可以使用侦听器,注意的是侦听器性能方面比不上计算属性.

2.如何使用侦听器?

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

直接使用了官方的demo,侦听器里面直接写需要侦听的数据的名字,侦听的数据发生变化就会执行下面对应函数的逻辑代码.

3.关于深度侦听

什么是深度侦听,当你发现侦听器无法侦听对象中的属性的时候,你就要使用深度侦听的了,在watch里面加入deep:true开始深度侦听,此时就可以侦听对象里面的属性变化了,如若不开启深度侦听,那么只能侦听一些普通数据以及数组,需要注意的是,深度侦听特别消耗性能,慎用!