深入理解vue的watch触发时机

当所监测的数据发生变化时，Vue 会在下一个更新循环中检测到数据的变化，然后触发 watch 钩子函数。在 watch 钩子函数被触发执行前，Vue 会先执行一个数据变化的队列，将所有变化的数据都执行更新，然后才执行 watch 钩子函数。

//同步代码
data: {
  type: 1,
  typeName: '',
}
watch: {
	type:{
  	handler(val) {
      console.log('watch钩子');
      if(val === 1) {
        this.typeName = '小明'
			}
      if(val === 2) {
        this.typeName = '小红'
			}
		},
    immediate: true
  }
}
created() {
 console.log('created 钩子')
 console.log(this.typeName);
}
monuted() {
  console.log('monuted 钩子')
	this.type = 2;
 	console.log(this.typeName);
}
//进入组件, 输出
---watch钩子
---created 钩子
---小明
---monuted 钩子
---小明
---watch钩子

//将mounted钩子里的代码改一下
monuted() {
  console.log('monuted 钩子')
	this.type = 2;
  this.$nextTick(()=>{
    console.log(this.typeName);
  })
}
//输出
---watch钩子
---created 钩子
---小明
---monuted 钩子
---watch钩子
---小红
1.
//第一次组件初始化
//watch钩子是一个回调函数钩子
//如果 immediate: true 它会在created生命周期前被执行


//官网:
//当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。
//这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。

注: tick就是re-render(更新dom)

2.
//第一次组件初始化之后, 被watch的数据改变后, 该watch钩子的执行时机是: 
//Vue将更新后的响应式数据缓存在一个队列中, 该过程完成之后 (在这之后)
//--- 触发watch ---
//下一个tick执行之前 (在这之前)

需要的问题是: 
下一个tick执行之前不是还有个beforeUpdate钩子吗
beforeUpdate: dom未更新(tick未执行), 但是最新的数据拿到了呀, 这玩意的执行时机不是和watch一样么
当然组件初始化之后被watch的数据改变后, watch的执行会在beforeUpdate之前被执行
如果在beforeUpdate之后, watch钩子中触发了data中数据的改变, 岂不是会反复执行beforeUpdate