父子组件生命周期执行顺序
加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
常用钩子简易版
父create->子created->子mounted->父mounted
activated, deactivated 是组件keep-alive时独有的钩子
总结
-
beforeCreate：data和el未初始化，值为undefined
-
created：可以得到data的值-对data数据进行操作-请求将返回的数据赋给data，Vue 实例使用的根 DOM 元素el还未初始化
-
beforeMount：data和el均已经初始化，el并没有渲染进数据，值为“虚拟”的元素节点
-
mounted：el已经渲染完成并挂载到实例上，DOM已经被渲染到页面上
-
beforeUpdate和updated触发时，el中的数据都已经渲染完成，但只有updated钩子被调用时候，组件dom才被更新
-
updated：不能准确的判断是哪个属性值被改变，用computed或watch函数来监听属性的变化
-
所有的生命周期钩子自动绑定 this 上下文到实例中，不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos()),会导致this指向父级
-
vue-router缓存组件状态，子组件需要在每次加载或切换状态的时用activated钩子触发
-
父子组件的钩子并不会等待请求返回，请求是异步的，用v-if来控制子组件钩子的执行时机
在父组件传递接口的数据给子组件时，一定要在子组件标签上加上v-if="传递的接口数据"
- 子组件的 vif = 接口返回值
<div class="test">
<children v-if="data1" :data="data1" ></children>
</div>
- 在子组件中 watch 监听
props:['data1'],
watch:{
data:{
deep:true,
handler:function(newVal,oldVal) {
this.$nextTick(() => {
this.data = newVal
this.data = newVal.url ? newVal.url : ''
})
}
},
}
