zoukankan      html  css  js  c++  java
  • 动态初始化的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
    		}
    	}
    }
    
  • 相关阅读:
    第6次实践作业
    第5次实践作业
    第4次实践作业
    第3次实践作业
    第二次实践作业
    2020系统综合实践 第1次实践作业
    软工实践个人总结
    第11组 Beta版本演示
    第11组 Beta冲刺(4/5)
    第11组 Beta冲刺(5/5)
  • 原文地址:https://www.cnblogs.com/erniu/p/8522434.html
Copyright © 2011-2022 走看看