vue watch vs getDerivedStateFromProps + componentDidUpdate

vue 中的watch 监听 props， data， computed 的变化， 执行异步或者开销较大的操作

getDerivedStateFromProps

getDerivedStateFromProps 会在render 前调用，并且在初始挂载和后续更新中都会调用， 返回一个对象更新state， 返回null 不更新任何内容，

当state 的值 在任何时候都需要props 的时候 适用该方法

static getDerivedStateFromProps(nextprops, preState){
  if(nextProps.info !== preState.info){
   return {info: nextProps.info}

  }
}

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate()方法在组件更新后被调用。首次渲染不会执行此方法。当组件更新后，可以在此处操作DOM、执行setState或者执行异步请求操作。

• 1）componentDidUpdate()的第三个参数snapshot参数来源于getSnapshotBeforeUpdate()生命周期的返回值。若没有实现getSnapshotBeforeUpdate()，此参数值为undefined。
• 2）可以在componentDidUpdate()中直接调用setState()，但是它必需被包裹在一个条件语句里，否则会导致死循环。
• 3）可以在componentDidUpdate()对更新前后的props进行比较，执行异步操作。
• 4）如果shouldComponentUpdate()返回值为false，则不会调用componentDidUpdate()。