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

本文探讨了Vue中父子组件的数据传递问题,特别是在父组件数据有延迟时,子组件可能接收到空值的情况。文章指出,可以在子组件中使用watch监听器来解决这个问题,特别是利用命令式$watch方法实现仅监听一次的场景。同时,详细梳理了Vue组件的渲染和更新过程,以及销毁过程中的生命周期钩子。
摘要由CSDN通过智能技术生成

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值