vue项目实战之使用watch监听数据

• 什么时候使用watch

  watch是vue项目中经常会使用的vue实例方法 当项目中遇到当一个数据发生改变导致其他数据发生改变的时候使用watch

  特点

  1. watch里面的方法默认是不会执行的 只有依赖的数据发生改变的时候才会执行
  2. watch的方法第一次不会执行 使用 immediate
  3. 常用在监听数据变化 发送数据请求
  4. watch默认只能监听一层数据结构，当子元素中还有子元素的时候就会监听不到 deep
  5. 在某些清空下watch会监听不到
     • 利用索引直接改变数组值
     • 修改数据的长度
     • 使用非变异的方法 生成一个新的属性的时候

• 如何使用watch监听事件对象

watch: {
	属性： {
   	handler(newValue, oldValue){
   			...
   	},
   	deep: true,  //深度监听
   	immediate: true,  //立即执行
   }
}

• 具体操作如何写

1. 监听路由

watch: {
   '$route'(){
   		...
   }
}

2. 监听属性

watch: {
    uploadList: {
      deep: true,
      handler: function(newVal, oldVal) {
        this.$nextTick(function() {
          this.$emit("on-change", this.transferImgs(newVal));
        });
      },
      immediate: true
    },
   },

监听vuex中的数据

'$store.state.site': {
	handler(){}
}

同时监听多个数据

//首先在computed中 将需要监听的设置为一个对象
computed: {
	mixObj() {
		const { data1, data2 } = this
		return {
			data1,
			data2
		}
	}
}

//然后在watch中监听
watch: {
	mixObj: {
		handler(val) {
			console.log(val)
		}
	}
}