The execution order of watch listening data in VUE is wrong

Listen for data retrieved from child components

When initializing a variable in Data and listening in Watch, and making a network request and assigning data to the variable in Methods, who executes first, the callback function started in Watch or the code not yet executed in Methods? Continue to execute code that has not yet been executed, and then execute the callback function in the listener.

The parent component takes the data and passes it to the child component

Data in the parent component initializes a variable, assigns data to the variable through network request and passes it to the child component, which uses watch to listen. Who executes the code first? Continue to execute code that has not yet been executed by the parent component, and then watch in the quilt component listens and executes the callback function sequentially.

How does watch monitor changes in data?

As long as it is an object or array, no matter whether it is null or not, the data change can be monitored for the first time. This data is determined by the value assigned by the code at the end of the watch (except null,undefine, and empty string, which cannot be monitored when the variable itself has these values). In my opinion, Watch listens for changes in the memory address of a variable to determine whether to perform a callback. Null is not a valid object instance, so no memory is allocated for it. It is simply a value indicating that the object reference is not currently referenced. The same is true for undefine and empty strings.

The parent component passes data to the child component, which uses watch to listen on props data. Assigning its variables to the array passed in the watch callback causes an infinite loop, okay?

watch: {
      provinceList: {
        deep: true.handler(val) {
          this.dataList = val // Copy the array shallow
          this.init()
          this.option && this.chart.setOption(this.option); }}},Copy the code

Because the subcomponent’s listener callback uses the normal = symbol, and because arrays, like objects, are reference types, the operation only assigns the address pointing to the array to the dataList, so subsequent operations on the dataList array will still be listened on, causing an infinite loop.