vue的生命周期

Vue 生命周期钩子函数是指在 Vue 实例从创建到销毁的整个生命周期中，Vue 提供的一些方法接口。这些方法接口可以在适当的时机执行相关的操作，比如数据初始化、组件更新、DOM 渲染等。

Vue 生命周期钩子函数包括以下四个阶段：

1. 创建阶段：beforeCreate、created
2. 挂载阶段：beforeMount、mounted
3. 更新阶段：beforeUpdate、updated
4. 销毁阶段：beforeDestroy、destroyed

下面是一个简单的示例：

new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  },  
  beforeCreate: function() {  
    console.log('beforeCreate')  
  },  
  created: function() {  
    console.log('created')  
  },  
  beforeMount: function() {  
    console.log('beforeMount')  
  },  
  mounted: function() {  
    console.log('mounted')  
  },  
  beforeUpdate: function() {  
    console.log('beforeUpdate')  
  },  
  updated: function() {  
    console.log('updated')  
  },  
  beforeDestroy: function() {  
    console.log('beforeDestroy')  
  },  
  destroyed: function() {  
    console.log('destroyed')  
  }  
})

 

在上述示例中，我们在 Vue 实例中定义了所有的生命周期钩子函数，并在每个函数中输出了一条日志信息。当 Vue 实例创建、挂载、更新和销毁时，我们可以在控制台中查看相应的日志信息，从而了解 Vue 生命周期的执行过程。

 Vue 生命周期的各个阶段：

1. 创建阶段：在创建 Vue 实例时，会首先执行 beforeCreate 钩子函数，然后执行 created 钩子函数。这一阶段主要完成一些初始化工作，比如创建 Vue 实例、设置数据和事件等。
2. 挂载阶段：在 Vue 实例创建完成后，开始将其挂载到 DOM 元素上，这时会执行 beforeMount 钩子函数，然后执行 mounted 钩子函数。这一阶段主要完成将 Vue 实例与 DOM 元素绑定在一起，以便后续的操作。
3. 更新阶段：当数据发生变化时，Vue 会检测到这些变化并重新渲染 DOM 元素，这时会执行 beforeUpdate 钩子函数，然后执行 updated 钩子函数。这一阶段主要完成根据数据变化更新 DOM 元素的操作。
4. 销毁阶段：当 Vue 实例不再需要时，会执行 beforeDestroy 钩子函数，然后执行 destroyed 钩子函数。这一阶段主要完成解除 Vue 实例与 DOM 元素的绑定关系，并清理资源。

 案例：

  
  
  
  
  
  
  


  
  

    
    
{{msg}}
    {{subMsg}}