vue2生命周期

<template>
  <div>
  
  </div>
</template>
 
<script>
  export default {
    props: ["pValue"],//父级参数
    components: {//组件
    
    },
    watch: { //监听
        pValue() {
               this.$emit('search', item)//父级方法
        }
    },
    data() {
      return {
        name: null
      }
    },
  
    beforeCreate() {
      console.log('------------------初始化阶段------------------')
      //这里data 和 methods 中的数据还没有初始化，所以输出的应该是undefined
      console.log(`这是beforeCreate的执行:${this.name}`)
    },
    created() {
      //这里数据已经初始化了，可以输出data中的内容
      console.log(`这是Create的执行:${this.name}`)
      //因为在created（）中还没有渲染到DOM页面，所以在渲染前修改，选的数据是下面的内容
      this.name = '在渲染到DOM之前就修改内容'
    },
    beforeMount() {
      console.log('------------------挂载阶段------------------')
      //开始编译数据,但是当前数据只在内存中渲染,并没有真实的渲染到html页面上
      console.log(`这是beforeMount的执行:${document.getElementById('test').innerText}`)
    },
    mounted() {
      //获取到数据,内存中的数据真实的挂载到页面中,Vue实例创建完成
      console.log(`这是mounted的执行:${document.getElementById('test').innerText}`)
    },
    beforeUpdate() {
      console.log('------------------更新阶段------------------')
      //页面上的数据还是以前的，内存中的数据是最新的
      console.log(`这是beforeUpdate的执行,页面数据:${document.getElementById('test').innerText}`)
      console.log(`这是beforeUpdate的执行,data数据:${this.name}`)
    },
    updated() {
      //页面上的数据和内存中的数据都是最新的
      console.log(`这是updated的执行,页面数据:${document.getElementById('test').innerText}`)
      console.log(`这是updated的执行,data数据:${this.name}`)
    },
    beforeDestroy() {
      console.log('------------------销毁阶段------------------')
      // 仍可以使用data与method方法
      console.log(`这是beforeDestroy的执行:${this.name}`)
    },
    destroyed() {
      // 已经销毁data与method方法
      console.log(`这是destroyed的执行:${this.name}`)
    },
     methods: {
      
     }
  }
</script>