首先,生命周期是什么?
Vue在创建、运行再到销毁过程中,会遇到各种各样的事件,这些事件统称为生命周期
生命周期分为:
1、初始化之前:beforeCreate(){
console.log(this.message)//undefined
} data和methods的数据还有没初始化,拿不到里面的数据
作用:页面重定向
2、初始化之后:created (){
console.log(this.message)
this.message='hi'
}data和methods的数据已经初始化,第一个操作date和methods数据的生命周期
作用:数据初始化,接口请求
3、虚拟DOM挂载:beforeMount(){}
4、真实DOM挂载:mounted(){}第一个可以操作DOM的生命周期
5、更新之前:brforeUpdate(){}可以执行0 次或更多次(页面中的数据是旧的,date里面的数据是新的)
6、更新之后:updated(){}可以执行0 次或更多次(页面中的数据和date里面的数据都是新的)
7、销毁之前:beforeDestroy(){}清空定时器和页面监听
8、销毁之后:destroyed(){}
其次,什么是父组件和子组件
父组件:在webstorm里面,写在views里面的.vue页面叫父组件
子组件:在webstorm里面,写在components里面的.vue页面叫子组件
父子组件传参
父传子:
1、在父组件的子标签中自定义一个属性
2、在子组件中用props接受,设置默认值
子传父:
1、在父组件的子标签中自定义一个事件,方法里有一个参数用来接收子组件的传值
2、在子组件中有一个this.$emit('自定义事件的名字',传递的数据)
父组件与子组件生命周期的执行顺序
父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载
加载渲染过程
父组件:beforeCreate -> 父组件:created -> 父组件:beforeMount -> 子组件:beforeCreate -> 子组件:created -> 子组件:beforeMount -> 子组件:mounted -> 父组件:mounted->父组件:beforeUpdate->子组件:beforeUpdate->子组件:updated->父组件:updated->父beforeDestroy->子组件:beforeDestroy->子组件:destroyed->父组件:destroyed
销毁过程
父组件先做销毁准备,然后子组件开始完整销毁,然后父组件完整销毁
父组件:peforeDestroy->子组件:peforeDestroy->子组件:destroyed->父组件:destroyed