vue2 生命周期基本使用

基础介绍?

Vue.js 提供了丰富的生命周期钩子函数，开发者可以通过这些钩子函数来控制组件在不同状态下的行为。Vue 组件的生命周期是指从组件实例化、初始化、渲染、更新到销毁的整个过程。

Vue 组件的生命周期钩子函数如下：

1. beforeCreate: 在实例创建之前调用，此时还没有调用?data?选项中定义的数据和?methods?方法。
2. created: 实例创建完成后调用，此时已经完成了数据的观测(obervation)，但尚未挂载DOM，$el 属性尚不可用。
3. beforeMount: 在挂载开始之前调用，相关的 render 函数首次被调用。这个时候还没有开始挂载节点，$el 属性尚不可用。
4. mounted: el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果rootinstance被挂载到一个文档内元素上，当mounted被调用时vm.el 也在文档内。
5. beforeUpdate: 数据更新时调用，发生在虚拟 DOM 打补丁之前。
6. updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
7. beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed: Vue 实例销毁后调用。调用后，所有的事件监听器会被移除，所有的子实例也都会被销毁。

这些生命周期钩子为开发者提供了在不同阶段进行操作的机会，例如数据的初始化、DOM 的操作、数据的请求等都可以在这些钩子中进行。

?

效果展示?

?

代码 效果一

  
  <template>    
    <div>    
      <h1>{{ message }}</h1>    
      <button @click="changeMessage">点击修改</button>    
      <button @click="del">点击删除</button>    
    </div>    
  </template>    
    
  <script>    
  export default {    
    data() {    
      return {    
        message: 'Hello, Vue!'    
      };    
    },    
    beforeCreate() {    
      console.log('beforeCreate，实例创建之前调用');    
    },    
    created() {    
      console.log('created，实例创建完成后调用');    
    },    
    beforeMount() {    
      console.log('beforeMount，在挂载开始之前调用');    
    },    
    mounted() {    
      console.log('mounted，在挂载之后调用');    
    },    
    beforeUpdate() {    
      console.log('beforeUpdate，数据更新时调用');    
    },    
    updated() {    
      console.log('updated，由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子');    
    },    
    beforeDestroy() {    
      console.log('beforeDestroy，实例销毁之前调用');    
    },    
    destroyed() {    
      console.log('destroyed，Vue 实例销毁后调用');    
    },    
    methods: {    
      changeMessage() {    
        this.message = 'Y你好!';    
      },   
      del() {   
        delete this.message;   
        this.$destroy(); // 手动销毁Vue实例   
      }   
    }   
  };   
  </script>

?代码 效果二 （稍微复杂）

  <template>  
    <div>  
      <h1>{{ message }}</h1>  
      <h1>{{ param }}</h1> 
      <button @click="changeMessage">点击修改</button>  
      <button @click="deleteComponent">点击删除</button>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        message: 'Hello, Vue!',  
        param: ''  
      };  
    },  
 
    created() {  
      console.log('组件已创建');  
    },  
      // 如果 在初始的时候一直 初始化 beforeMount   this.param = 'beforeMount';   
      //  然后进阶就会出发下边的跟新 就会导致默认循环 浏览器无限循环 
      // 所以 初始化 param 就不要马上出发更新 
      // 可以尝试解开注释  查看效果
    beforeMount() {  
      // this.param = 'beforeMount';  
      console.log('挂载开始');  
      console.log(this.param,'挂载开始')
    },  
    mounted() {  
      // this.param = 'mounted';  
      console.log('组件已挂载'); 
      console.log(this.param,'组件已挂载') 
    },  
    beforeUpdate() {  
      // this.param = 'beforeUpdate';  
      console.log('数据更新前');  
      console.log(this.param,'数据更新前') 
    },  
    updated() {  
      // this.param = 'updated';  
      console.log('数据已更新');  
      console.log(this.param,'数据已更新') 

    },  
    beforeDestroy() {  
      this.param = 'beforeDestroy';  
      console.log('组件销毁前');  
      console.log(this.param,'组件销毁前') 

    },  
    destroyed() {  
      this.param = 'destroyed';  
      console.log('组件已销毁');  
      console.log(this.param,'组件已销毁') 
    },  
    methods: {  
      changeMessage() {  
        this.message = 'Y你好!';  
        this.param = 'changeMessage';  
      },  
      deleteComponent() {  
        this.$destroy(); // 手动销毁组件实例  
        this.param = 'deleteComponent';  
      }  
    }  
  };  
  </script>