vue---钩子函数及父子组件执行顺序

1、钩子函数

钩子的概念源于Windows的消息处理机制，通过设置钩子，应用程序可以对所有的消息事件进行拦截，然后执行钩子函数，对消息进行想要的处理方式。以下是vue常用的一些钩子函数。

beforeCreate====组件实例化之前执行的函数

created========组件实例化完毕，但页面还未显示

beforeMount====组件挂载前，页面仍未显示，但虚拟Dom已经配置

mounted=======组件挂载后，此方法执行后，页面显示

beforeUpdate===组件更新前，页面仍未更新，但虚拟Dom已经配置

updated=======组件更新，此方法执行后，页面显示

activated=======keep-alive 组件激活时调用

deactivated=====keep-alive 组件停用时调用

beforeDestory===组件销毁前

destoryed======组件销毁

ref ：通过ref访问子组件

<base-input ref="usenameInput"></base-input>

模板渲染后通过this.$refs.usernameInput.focus();访问子组件。注意当模板渲染后才能使用ref进行访问。

beforeCreate钩子中不能访问data,methods,computed,ref

Created和beforMount可以访问到data,methods,computed，访问不到ref

mounted可以访问到data,methods,computed,ref

2、父子组件执行顺序

• 加载渲染过程：先依次执行父的beforeCreate、created、beforeMount，再执行子的beforeCreate、created、beforeMount，接着执行子的mounted再执行父的mounted。

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

• 更新过程
  　　父beforeUpdate->子beforeUpdate->子updated->父updated

• 销毁过程
  　　父beforeDestroy->子beforeDestroy->子destroyed->父destroyed