Vue – 侦听器 watch 基本使用

简介

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作

用法

    const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },

      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        username(新的值, 旧的值) {
            ... ...
          })
        }
      }
    })

若要监听某个属性的数据，只需要声明定义一个与属性名相同的方法成员于 watch 中即可，将接收两个参数，分别为属性改变后的 新值 和改变前的 旧值

定义监听器

监听器包含传统方法形格式和对象形格式。

方法形格式的监听器使用如下：

// 通过使用属性定义监听方法
watch: {
        username(newVal, oldVal) {
            ... ...
          }
         或
        username : function () {
              ... ...
        }
        
}

对象形格式监听器使用如下：

// 通过使用属性定义监听方法
watch: {
        username: {
            handler : function (newVal, oldVal){
                 ... ...
             }
          }
         或
        username: {
            handler (newVal, oldVal){
                 ... ...
             }
          }
}

把需要监听的 username 属性作为一个对象使用，其中 hander 属性为 username 做改变时触发的方法。

immediate 属性

watch 的作用是当表单数值出现改变时，能触发自定义处理涵数，但默认在第一次打开页面时不进行值的监听，若要在页面打开时即监听值，可设置 immediate 属性，但该操作只能在对象形格式下设置。

// 通过使用属性定义监听方法
watch: {
        username: {
            handler (newVal, oldVal){
                 ... ...
             },
            // immediate 为 false 则不监听，为 true 则监听
            immediate : true
          }
}

设置 immediate 为 true 后，页面首次加载时即监听属性值的变化。

deep 属性

watch 除了能监听基本数据类型外，还能监听对象类型的数据，但是对象类型的数据具有层级性，配置deep属性设定 watch 是否深度监控，默认为 false,若设为 true ,则对象中的成员属性发生改变时，也会触发监听方法执行，该操作只能在对象形格式下设置。

监听对象中单个属性变化

如要监听对象属性中的数据，又不想使用对象型格式的 watch 监听，可使用点语法直接定义：

// 使用点语法直接监听对象属性值
watch: {
        'foo.username'(){
             console.log("使用点语法实现不开启deep模式下实现对对象属性的监听")
         }
}