Vue.js 生命周期

简介: 最近一直是在用Vue做项目 , 所以了解生命周期对于了解vue十分重要 : 官方给出对vue生命周期的解释 :

最近一直是在用Vue做项目 , 所以了解生命周期对于了解vue十分重要 :

官方给出对vue生命周期的解释 :

               

即便官方给的再详细 , but we need have a try ! : )


<template>
<div>
  <div >{{a}}</div>
  <button @click="counter += 1">{{counter}}</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {

        a: "Vue.js",
        counter:1
      }
    },
    methode:{
      change(){
          this.a = 'vue'
      }
    },


    beforeCreate: function () {


      console.log("创建前")
      console.log(this.a)
      console.log(this.$el)

    },

    created: function () {

      console.log("创建之后");
      console.log(this.a)
      console.log(this.$el)

    },

    beforeMount: function () {

      console.log("mount之前")
      console.log(this.a)
      console.log(this.$el)

    },

    mounted: function () {

      console.log("mount之后")
      console.log(this.a)
      console.log(this.$el)

    },

    beforeUpdate: function () {

      console.log("更新前");
      console.log(this.a)
      console.log(this.$el)

    },

    updated: function () {

      console.log("更新完成");
      console.log(this.a);
      console.log(this.$el)

    },

    beforeDestroy: function () {

      console.log("销毁前");
      console.log(this.a)
      console.log(this.$el)
      console.log(this.$el)

    },

    destroyed: function () {

      console.log("已销毁");
      console.log(this.a)
      console.log(this.$el)

    }
  }


</script>

结果 :

            

原文发布时间为:2018年02月10日
原文作者:葉子君 

本文来源:开源中国 如需转载请联系原作者

目录
相关文章
QGS
|
28天前
|
资源调度 JavaScript 前端开发
手拉手Vue3生命周期实战应用
手拉手Vue3生命周期实战应用
QGS
31 0
|
1月前
|
JavaScript 开发者
Vue组件生命周期钩子函数有哪些?它们分别在什么时候触发?
Vue组件生命周期钩子函数有哪些?它们分别在什么时候触发?
29 0
|
1月前
|
缓存 JavaScript 前端开发
vue2生命周期
vue2生命周期
|
1月前
第40节: Vue3 注册生命周期钩子
第40节: Vue3 注册生命周期钩子
15 1
|
1月前
|
JavaScript 前端开发 小程序
图解助你理解 vue生命周期
图解助你理解 vue生命周期
|
1天前
|
存储 JavaScript 前端开发
在Vue中,除了`beforeDestroy`生命周期钩子函数,还有哪些方法可以在组件销毁时清理定时器?
在Vue中,除了`beforeDestroy`生命周期钩子函数,还有哪些方法可以在组件销毁时清理定时器?
5 2
|
1天前
|
JavaScript
vue的setup中能调用哪些生命周期
vue的setup中能调用哪些生命周期
9 3
|
2天前
|
JavaScript
vue 的实例生命周期
vue 的实例生命周期
5 0
|
8天前
|
JavaScript
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
11 2
|
9天前
|
JavaScript
在Vue中,如何实现生命周期钩子函数的多态?
在Vue中,如何实现生命周期钩子函数的多态?
10 0

相关产品

  • 云迁移中心