Vue生命周期钩子Demo

1. 引入vue.js库

• 源码
• demo

2. html

3. script

注意：
1. 最常用的就是前四个生命周期钩子beforeCreate、created、 beforeMount、mounted
2. 生命周期里面的activated和deactivated我这里没有做演示，只写了大概意思

Vue.component('button-counter', {
    template: '我是按钮{{ counter }}',
    data: function () {
      return {
        counter: 0
      }
    },
    methods:{
        increment: function () {
          this.counter += 1
          this.$emit('increment')
        }
    }
  })

var vm =  new Vue({
    el:'#app',
    data() {
      return{
        total: 0
      }
    },
    methods: {
      incrementTotal(){
        this.total += 1
      }
    },
    // 组件的生命周期
    beforeCreate(){ //在实例创建之后，在数据初始化之前被调用
      alert('1-beforeCreate');
    },
    created(){  // 在数据初始化之后被调用，如果你的页面进来的时候就调用接口,那么created是第一选择
      alert('2-created');
    },
    beforeMount(){ //在组建渲染之前被调用，也就是说数据渲染之前，比如要色彩渲染可以在这里写
      alert('3-beforeMount');
    },
    mounted(){//整个实例被创建完成后被调用,比如：实例创建完成、数据初始化、渲染页面数据后，才被调用，这个时候就可以在mounted这个生命周期里面写Dom操作了,注意：生命周期用的最多的就是mounted
      alert('4-mounted'); 
    },
    beforeUpdate(){ //在数据改变时被调用，比如: total = 0 , 然后手动把num++; 就会执行此方法
      alert('5-beforeUpdate'); 
    },
    updated(){ //数据被更新之后,  比如：total值改变之后，再被执行
      alert('6-updated'); 
    },
    activated(){ //keep-alive 组件激活时调用，也就是说在路由切换时被调用，注意要配合keep-alive使用才会被调用
      alert('7-activated');
    },
    deactivated(){//keep-alive 组件停用时调用，也可以理解成在路由切换的会自动停用组件， 
      alert('8-deactivated');
    },
    beforeDestroy(){//实例销毁之前被调用，这个方法适用于 把new Vue({})赋值给一个变量时，如： var vm = new Vue({})，然后用vm.$destroy() 方法销毁这个实例
      alert('9-beforeDestroy');
    },
    destroyed(){//实例销毁之后被调用，一般情况下，在页面切换路由时，会自动销毁组件，
      alert('10-destroyed');
    }
  })