vue父组件的watch比子组件的watch先触发

在Vue中,父组件和子组件的watch触发顺序并不固定,它们会根据数据更新的顺序和组件渲染的流程进行。正常情况下 :

  1. 当父组件的数据发生变化时,它会先触发自身的watch
  2. 然后,如果这个变化影响到了传递给子组件的props,那么子组件会接收到新的props,并且也会触发自身的watch

       然而,这种顺序并不是绝对的,因为Vue内部的更新过程是异步的,特别是在使用了Vue的优化策略(如异步更新队列)时。这意味着即使父组件的watch先于子组件执行,也有可能在实际DOM更新时,子组件的watch先被执行。

解决方案:在子组件定义一个方法直接用  props.传过来的值 ,在父组件中传递的值发生变化的时候直接调用子组件中的这个方法即可,

示例:

子组件:

vue父组件的watch比子组件的watch先触发_第1张图片

父组件 

vue父组件的watch比子组件的watch先触发_第2张图片

你可能感兴趣的:(vue.js,前端)