vue中如下代码中的created和watch中alert弹出如下顺序的原因是啥呢？

Question

如下是一个子组件中的部分代码，当在父组件中给amount赋一个值的时候，alert弹出顺序为什么是 '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')
  })
},

Answer 1

这应该跟你created和watch没关系，你的疑惑都是因为async initData()这个方法是异步导致的。你把异步的操作去掉，执行created和watch你就能清楚地发现执行顺序了。另外，你也没说你希望看到的是什么结果啊？？你的问题疑惑是执行顺序混乱吗？更新一下，虽然你给的业务场景还不够清楚。但是还可以分析整个过程：父组件created完成执行子组件的created，弹出alert('created')。同时进到async/await的initData方法中去。initData方法进入，触发alert('init: 1')，同时由于await的异步等待特性，下面的方法会被挂起，只有等待它ajax请求完返回才会继续执行。刚刚是子组件创建完，进到方法去，由于异步挂起，程序不会闲着，继续走。挂载（mounted）了子组件后，挂载父组件（你说你在父组件通过refs改变了值），所以这时候触发子组件的watch，也就是弹出了alert（1）。看你这一句判断if (this.currentLimitType === '') {this.initData()}可以看到又进到initData函数里面了，又会执行alert('init: 1')，由于又遇到异步了，那么继续走会执行alert(2)。此时之前的异步请求成功返回数据，弹出alert('init: 2')，那么后续还有一个请求没有返回，继续等待即可，过程同上，大概过程就是这样，联系起来就是这样：created => init: 1 => 1 => init: 1 => 2 => init: 2