动态初始化的Data对象如何避免首次被watch捕获?

场景:###

data对象中的初始化数据是通过异步获取到的,业务逻辑过程中又需要对list的变化做相应处理,问题就出在初始化赋值的同时就会触发watch里的handle,而我们希望的是在初始化赋值的时候不要让handle执行,只有后续的change操作才会响应。

export default {
	data () {
		return {
			list: []
		}
	},
	created () {
		setTimeout(() => {
			this.list = ['a', 'b', 'c', 'd']
		}, 300)
	}
	watch: {
		list: function(newVal, oldVal) {
			// do something
		}
	},
	methods: {
		change () {
			this.list.push('12345')
		}
	}
}

解决办法:

说到底还是watch建立的时机问题,既然想要watch监控初始化之后的变化,那就在赋值完成之后,再通过实例方法(vm.$watch)对指定的data对象进行监测就好了。

export default {
	data () {
		return {
			list: []
		}
	},
	created () {
		setTimeout(() => {
			this.list = ['a', 'b', 'c', 'd']
			this.$watch('list', this.changeHandle)
		}, 300)
	}
	methods: {
		change () {
			this.list.push('12345')
		},
		changeHandle () {
			// do something
		}
	}
}
原文地址:https://www.cnblogs.com/erniu/p/8522434.html