Chaoszhu'Blog

Appearance

Vue生命周期 ​

每个组件都是一个Vue构造函数的子类

10个周期函数 ​

beforeCreate ​

  • 依次初始化inject、state( props、methods、data、computed、initWatch)、provide；
  • props&methods比data优先初始化，因此在data中可以使用props，反过来则不行

created ​

  • props、methods、data、computed、initWatch等都已经初始化好了，可以访问

beforeMount ​

  • 模板已经在内存中生成，但并未挂载到页面

mounted ​

  • 整个Vue实例初始化完毕，如果某些插件需要访问Dom，最早要在mounted中进行

beforeUpdate ​

  • 页面数据还是旧的，data是最新的，页面尚未与data同步

updated ​

  • 首次渲染与与data中已存在的数据更新才会调用
  • 执行到这个钩子，页面和data数据已经同步了(页面已更新完成)

beforeDestroy ​

  • 进入销毁阶段，此时data、methods、指令等都是可用状态【可以在这里注销一些事件】

destroyed ​

  • 已销毁

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子: activated 与 deactivated ​

  • activated: 在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用.
  • deactivated：组件离开路由时调用.

父子组件生命周期更新过程 ​

  • 父: create ---> 子: create // 先创建父组件，再创建子组件
  • 子: mouted ---> 父: mouted // 先挂载子组件，再挂载父组件