vue2生命周期

<template>
  <div>
    vue
    <div id='mydiv'>操作DOM</div>
    <button @click="num++">{{num}}</button>
    <button @click="$destroy()">销毁</button>
    <hr/>
    <Child/>
  </div>
</template>

<script>
import Child from './components/Child'
  export default {
    components:{Child},
    // 在页面上渲染的数据 需要存储在data中
    data() {
      return {
        msg: 'hello',
        num:100
      }
    },
    // 注意生命周期函数必须为普通函数定义 不能够使用箭头函数
    // 创建前
    beforeCreate(){
      console.log(this);
      console.log('1、组件创建前');
    },
    // 创建后  发送ajax请求
    created(){
      console.log('2、组件创建完毕');
    },
    // 挂载前  无法获取到DOM元素
    beforeMount(){
      console.log('3、组件挂载前');
      console.log(document.getElementById('mydiv'));
    },
    // 挂载后  可以获取到DOM元素  绑定事件
    mounted(){
      console.log('4、组件挂载后');
      console.log(document.getElementById('mydiv'));
    },
    // 更新前
    beforeUpdate(){
      console.log('5、组件更新前');
    },
    // 更新后
    updated(){
      console.log('6、组件更新后');
    },
    // 销毁前  资源回收操作  解绑事件  取消请求  停止定时器
    beforeDestroy(){
      console.log('7、组件销毁前');
    },
    // 销毁后
    destroyed(){
      console.log('8、组件销毁后');
      console.log(this);
    }

  }
</script>

<style lang="scss" scoped>

</style>