Vuejs使用watch侦听器侦听数据时遇到的一系列问题

2021 年 12 月 24 日 星期五
/ ,
12

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的数组操作仍然会被监听到,导致无限循环。
以上均为个人见解,如有不正确的地方,欢迎指正!

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...