2-5 生命周期

<template>
  <div>
     <p ref="p">hello world</p>
     <input type="checkbox" v-model="isShow">
  </div>
</template>
<script>
export default {
  name: "Center",
  data(){
    return {
      isShow:false
    }
  },
    //这个生命周期中data还没有被创建
  beforeCreate () {
    console.log(this.isShow)
    console.log("组件创建之前");
  },
    //组件被创建,还没有装载在DOM上,不能操作DOM
  created () {
    console.log(this.$refs.p)
    console.log(this.isShow)
    console.log("组件创建");
  },
  beforeMount () {
    console.log("组件装载之前");
  },
    //挂载到真实的DOM节点上,可以操作DOM
  mounted () {
    console.log("组件装载");
    console.log(this.$refs.p)
  },
    //一般用watch来替换,update只有页面依赖的data的数据更新才会触发
  beforeUpdate(){
    console.log("数据被更新之前")
  },
  updated () {
    console.log("数据更新后");
  },
  beforeDestroy () {
    console.log("销毁组件前");
  },
  destroyed () {
    console.log("销毁组件");
  }
}
</script>