vue - 生命周期钩子

[plh97]

前言

单个vue组件都有自己的生命周期，包括不限于组件的创建（created），mounted挂载，更新updated，destroyed销毁，完全了解组件有助于进行vue的进一步学习。组件是vue框架的基石。

书写vue组件的生命周期钩子的时候经常有的疑问，我到底应该写简便的箭头函数，还是写function这种，由于无法指定vue实例本身，this孕育而出，默认this执行vue实例，但是问题是箭头函数和普通函数不一样，换句话说，箭头函数根本没有自己的构造器？(还是说他没有自己的this？我忘了)，所以箭头函数内部this全部指向函数本身，这和vue核心思想是相悖论的。

created: () => console.log(this)   // Uncaught TypeError: Cannot read property of undefined

完整生命周期示意图

这个没啥好说的

大致流程

• beforeCreate : 创建之前
• created ：创建完成
• beforeMount ： 挂载之前
• mounted ：挂在之后
• beforeUpdate ：更新之前 只有在虚拟dom重新渲染时候才触发
• updated ： 更新完成 只有在虚拟dom重新渲染时候才触发
• beforeDestory：销毁之前
• destory：销毁之前

<template>
  <div class="nav-bar">
    {{test}}
    <input type="text" v-model="test">
  </div>
</template>
<script>
export default {
  data(){
    return {
      test: 'ttt',
    }
  },
  beforeCreate(){
    console.log('beforeCreate');
  },
  created(){
    console.log('created');
  },
  beforeMount (){
    console.log('beforeMount ');
  },
  mounted (){
    console.log('mounted ');
  },
  beforeUpdate (e){
    console.log('beforeUpdate ',e);
  },
  updated (e){
    console.log('updated ',e);
  },
  beforeDestory (){
    console.log('beforeDestory ');
  },
  destory (){
    console.log('destory ');
  },
}
</script>

只有当你键入字符的时候触beforeUpdate updated