对vue生命周期/钩子函数详解

 

1. beforeCreate   初始化之前
2. created  创建完成
3. beforeMount   挂载更新前
4. mounted   被创建
5. beforeUpdat   数据更新前
6. updated   被更新后
7. beforeDestroy   销毁之前
8. destroyed   销毁之后

 

对vue生命周期/钩子函数详解

对于实现页面逻辑交互等效果，我们必须知晓vue的生命周期，才能愉快的玩耍，知道我们写的东西应该挂载到哪里，vue官方给出的api讲解的那叫一个简单啊，如下：

所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此this与你期待的 Vue 实例不同，this.fetchTodos的行为未定义。

下面附加一张生命周期图示

 

详解：

1. beforeCreate
   官方说明：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
   解释：这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；

    beforeCreate() {
      console.log(this.page); // undefined
      console.log{this.showPage); // undefined
    },
    data() {
      return {
        page: 123
      }
    },
    methods: {
      showPage() {
        console.log(this.page);
      }
    }
   

2. created
   官方说明：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
   解释说明： 这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；

    created() {
      console.log(this.page); // 123
      console.log{this.showPage); // ...
      $('select').select2(); // jQuery插件需要操作相关dom，不会起作用
    },
    data() {
      return {
        page: 123
      }
    },
    methods: {
      showPage() {
        console.log(this.page);
      }
    }
   

3. beforeMounte
   官方说明：在挂载开始之前被调用：相关的 render 函数首次被调用。

4. mounted
   官方说明：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
   解释说明：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行

    mounted() {
      $('select').select2(); // jQuery插件可以正常使用