子组件时时更新父组件传来的值

父子组件传值时，父组件从接口获取数据，通过props传递给子组件。实际情况下：父组件获取数据有时间延迟，传递的props值为空，子组件接收的数据为props默认值

渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

 子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

父beforeUpdate->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

在子组件第一次获取不到父组件传过来的值时 那么建议使用watch监听器进行监听， 但是往往这种情况发生在给子组件赋值的时候 即只需页面加载时执行一次。这时候 

就是说，vue 的 watch 除了可以使用声明式的配置项以外，还可以通过命令式 vm.$watch 方法。

如下是我们常用的声明式：

export default{
  data: {
    isReady: false
  },
  watch: {
    isReady(newValue, oldValue) {
      console.log(newValue)
    }
  }
}

如下是我们比较少用的命令式：

命令式好处是，可以得到一个取消监听的函数，在需要时取消监听，比如你想要只监听一次，可以像下面使用：

export default {
  data: {
    isReady: false
  },
  mounted() {
    const unwatch = this.$watch('isReady', function(newValue, oldValue){
      console.log(newValue);
      unwatch()
    });
  },
}

命令式在ts和js中都能使用 

标签：isReady,传来,watch,监听,命令式,时时,组件,newValue
来源： https://blog.csdn.net/weixin_42478537/article/details/121640903