Vuejs使用watch侦听器侦听数据时遇到的一系列问题
执行顺序的问题
侦听子组件中获取的数据
在data中初始化一个变量,并在watch中侦听,在methods中发起异步请求前将数据赋值给这个变量时,watch中触发的回调函数和methods中等待异步执行完毕前还未执行的代码谁会先执行?等待methods异步执行完毕,继续执行还未执行的代码,然后执行监听器中的回调函数。
父组件获取数据,传递给子组件
父组件中的data初始化一个变量,通过异步请求获取数据赋给该变量并传递给子组件,子组件中使用watch进行侦听,代码谁先执行?继续执行父组件还未执行的代码,执行完后按顺序被子组件中的watch侦听到并执行回调函数。
watch如何监听到数据的变化?
只要是对象和数组,无论是否是空值,第一次都可以侦听到数据变化,这个数据是按代码最后赋的值来决定传入watch的newValue,(除了null,undefine,和空字符串在变量本身就为这些值时无法监听到),我认为,watch如果侦听的是复杂数据类型,如对象,数组,那么它侦听的是变量内存地址的变化来决定是否执行回调。null不是有效的对象实例,因此没有为它分配内存。它只是一个值,指示对象引用当前不引用对象。
,估计undefine,和空字符串也是如此。
父组件给子组件传递数据,子组件使用watch侦听props数据,在watch的回调函数中将自身变量赋值为传递过来的数组,会导致无限循环?
watch: {
provinceList: {
deep: true,
handler(val) {
this.dataList = val //浅复制了数组
this.init()
this.option && this.chart.setOption(this.option);
}
}
},
因为子组件的watch回调函数中直接使用了普通的=
号,数组跟对象一样也是引用类型,所以此时的操作只是将指向数组的地址赋值给了dataList
,所以后续对dataList的数组操作仍然会被监听到,导致无限循环。
以上均为个人见解,如有不正确的地方,欢迎指正!