[JavaScript知识库]vue侦听器

前言

当我们需要对某些数据的变化进行监视并执行某些操作时，可以使用 watch 侦听器

基本用法

方法格式（函数格式）

const vm = new Vue({
  el: '#app',
  data: {
    username: '',
  },
  watch: {
    // 如果 `username` 发生改变，这个函数就会运行
    // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
    // newValue 是'变化后的新值' oldValue 是'变化前的旧值'
    username(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
})

对象格式

const vm = new Vue({
  el: '#app',
  data: {
    username: '',
  },
  watch: {
    // 如果 `username` 发生改变，这个函数就会运行
    username: {
      // 侦听器的处理函数
    	handler(newValue, oldValue) {
    		console.log(newValue, oldValue)
    	},
    }
  }
})

immediate选项-立即触发

默认情况下，刚进入页面时是不会触发侦听器的，只有监听的数据发生变化才会触发，这里需要使用侦听器的 对象格式 并将 immediate 选项设为true

const vm = new Vue({
  el: '#app',
  data: {
    username: '',
  },
  watch: {
    username: {
    	// 侦听器的处理函数
    	handler(newValue, oldValue) {
    		console.log(newValue, oldValue)
    	},
    	// 控制侦听器是否自动触发一次，默认值false
    	immediate: true
    }
  }
})

deep选项-深度监听

默认情况下，监听的数据是个对象，对象的属性发生变化不会触发侦听器，这里需要使用侦听器的 对象格式 并将 deep 选项设为true

const vm = new Vue({
  el: '#app',
  data: {
    info: {
    	username: ''
    }
  },
  watch: {
    info: {
    	// 侦听器的处理函数
    	handler(newValue, oldValue) {
    		console.log(newValue, oldValue)
    	},
    	// 控制侦听器开启深度监听，默认值false
    	// 开启深度监听后，info的username发生变化就会触发侦听器
    	deep: true
    }
  }
})

监听对象属性

如果只需要监听对象的单个属性，可以使用 ‘对象.属性’ 的方式来定义侦听器

const vm = new Vue({
  el: '#app',
  data: {
    info: {
    	username: ''
    }
  },
  watch: {
  	// 监听username的变化
    'info.username'(newValue, oldValue) {
    	console.log(newValue, oldValue)
    }
  }
})