移动端项目总结 - Vue 生命周期函数

beforeCreated：不能读到data中的数据

beforeCreate() {
  console.log('beforeCreate()', this.title);
}

从不能读取data中的数据，到可以读取，这中间实现了数据代理，数据响应式

created：自created之后，就可以读到data中的数据

created() {
  console.log('created()', this.tittle);
}

beforeMount：还不能读取组件的$refs属性

beforeMount() {
  console.log('beforeMount()', this.$refs.tittle);
}

mounted表示已经挂载，也就是说已经显示，但是beforeMounted还没有显示。还没有挂载的组件其$refs属性是无法读取的，只有挂载之后才能读取。这期间，还会做初始化显示。

mounted：可以读取组件的$refs属性

mounted() {
  console.log('mounted()', this.$refs.tittle);
}

beforeUpdate：界面更新前。数据已经更新，但是界面还没有更新

beforeUpdate() {
  console.log('beforeUpdate()', this.$refs.title.textCount);  // 通过查看页面中的数据是老的数据还是新数据，就可以看到是在页面更新前，还是在页面更新后。
}

界面更新。

update：页面更新过后

updated() {
  console.log('updated()', this.$refs.title.textCount);
}

beforeDestroy：在此处做一些清理工作

beforyDestory() {
  console.log('beforyDestory()');
}

destroyed：

destoryed() {
  console.log('destoryed()');
}

主要针对路由组件：前提是路由组件用上<keep-alive>，只有用上了keep-alive才有失活激活的概念，也就是加了之后，组件之间进行切换，切换到的组件就可以激活，被切换走的组件就会失活。Component组件指定一个is也可以动态加载组件，但是这个一般用得比较少。

beforeActivat：失活，表示不再显示了，并被一个组件死亡

beforeActive() {
  console.log('beforeActive()');
}

activated：激活

actived() {
  console.log('actived()');
}

可以用在监测路由组件之间的切换，父组件一定要用keep-alive将其包裹。 

<!-- 父组件 -->
<template>
  <div>
    <router-link to="/review/mixin">mixin</router-link>
    <router-link to="/review/life">life</router-link>
    <hr>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>