vue组件化--生命周期函数

1. 生命周期函数(钩子函数)

定义 : vue框架内置函数 , 随着组件的生命周期 , 自动 按次序 执行

作用 : 在特定的时间点 , 执行某些特定的 *** 作

场景 : 组件创建完毕后 , 可以再created生命周期函数中发起Ajax请求 , 从而初始化data数据

四个阶段 : 

        初始化 => 创建组件          =>      beforeCreate   created

        挂载 => 渲染显示组件      =>      beforeMount   mounted      

        更新 => 修改了变量          =>      触发视图刷新    beforeUpdate   updated

        销毁 => 切换页面              =>     会把组件对象从内存删除   beforeDestroy   destroyed

 子组件生命周期如下

执行顺序 :  beforeCreate => created => beforeMount => mounted => createUpdate => updated => beforeDestroy => destroyed

如果要考察是的父和子生命周期函数的执行顺序呢?

执行顺序如下 : 

        父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created =>         子beforeMount => 子mounted => 父mounted => 父beforeUpdate => 子beforeUpdate         => 子updated => 父updated => 父beforeDestroy => 子beforeDestroy => 子destroy =>         父destroy

2. $refs使用

作用 : 获取dom元素或者组件实例

 2.1子组件如下

 2.2父组件如下

 3. nextTick

背景 : 数据变化而导致的dom更新是异步的

 示例如下:

 理解图如下:

 $nextTick场景如下:

 理解图如下: