What is the reason why alert pops up in the following order in created and watch in the following code in vue?

the following is part of the code in a child component. When assigning a value to amount in the parent component, why the alert pop-up order is" created" = > "init: 1" = > 1 = > "init: 1" = > 2 = > init: 2"= > "init: 2"
data () {

return {
  currentLimitType : ""
}

},
watch: {

amount(val) {
  alert(1)
  if (this.currentLimitType === "") {
    this.initData()
  }
  alert(2)
  ... //

},
created () {

alert("created")
this.initData()

},
methods: {

async initData() {
  alert("init: 1")
  const res = await queryOnceLimit() // ajax
  alert("init: 2")
  this.handlInitData(res, () => {
    this.computedCurrentLimitType() // currentLimitType
    this.$emit("moneyLimitOk")
  })
},
Vue.js
Aug.27,2021

execute created, first and then watch

component must first created , and then parse the value passed by the parent component
here you should use mounted

this should have nothing to do with created and watch . Your confusion is all because the async initData () method is asynchronous.
you remove the asynchronous operations and execute created and watch and you can clearly see the execution sequence.

besides, you didn't say what you wanted to see? is your question out of order?

< hr >

update, although the business scenario you gave is not clear enough. But you can also analyze the whole process:

  1. parent component created finishes executing created , pops up alert ('created') . Go to the initData method of async/await at the same time.
  2. The initData method enters, and triggers alert ('init: 1') . At the same time, due to the asynchronous waiting feature of await , the method below will be suspended, and the execution of will continue only after waiting for its ajax request to return.
  3. has just finished creating the subcomponent, go to the method, because the program is suspended asynchronously, the program will not be idle and keep going. After mounting the (mounted) child component, mount the parent component (you said you changed the value in the parent component through refs), so trigger the watch , of the child component, that is, pop up alert (1) .
  4. look at your sentence to judge if (this.currentLimitType =') {this.initData ()} you can see that you have entered the initData function again, and will execute alert ('init: 1') again. As you encounter asynchrony again, then continue to execute alert (2) .
  5. the asynchronous request before this time successfully returns data, and pops up alert ('init: 2') . Then there is another request that has not been returned, and you can continue to wait. The process is the same as above. This is probably the process, and the connection is like this: 
created => init: 1 => 1 => init: 1 => 2 => init: 2

Previous: After using two time selection boxes, element can choose the time when the first one is assigned a default value, and why not the second one.

Next: Js in such a definition of the function, how to reference it, this is defined as a variable or a function ah?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu