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

父子组件传值时,父组件从接口获取数据,通过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中都能使用 

上一篇:vue学习---监视属性简写


下一篇:C#中类型转换----as用法