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