浅析Vue生命周期

Vue生命周期可以分为8个阶段，分别是：

• 创建阶段：beforeCreate、created、beforeMount；
• 挂载阶段：mounted；
• 更新阶段：beforeUpdate、updated；
• 销毁阶段：beforeDestroy、destroyed。

这些钩子函数可以让你在特定的时刻执行到某些自定义的逻辑，比如数据的初始化、渲染DOM前后的操作、销毁组件前的清理工作等等。

下面将对每个阶段进行详细讲解。

创建阶段

beforeCreate

这个钩子函数在Vue实例被创建时会被调用，此时组件的选项和实例状态都还没有初始化。无法访问到this.data、this.computed等属性，一般用来做一些全局的初始化。

示例一：

new Vue({ 
  beforeCreate() {
    console.log('beforeCreate')
  }
})

created

这个钩子函数在Vue实例的数据状态已经初始化，并且Vue实例也已经准备好，但是还没有挂载到DOM树上，可以访问到this.data、this.computed等属性。

示例二：

new Vue({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  created() {
    console.log('created: ' + this.message)
  }
})

beforeMount

这个钩子函数在Vue实例已经准备好，并且所有数据都已经处理完毕，但是还没有渲染到DOM树上。

示例三：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeMount() {
    console.log('beforeMount')
  }
})

挂载阶段

mounted

这个钩子函数在Vue实例被挂载到DOM树上后被调用，此时可以访问到DOM元素，一般用来做一些DOM操作。

示例四：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  mounted() {
    document.querySelector('#my-button').addEventListener('click', () => {
      console.log('button clicked')
    })
  }
})

更新阶段

beforeUpdate

这个钩子函数在Vue实例数据更新之前被调用，可以在这里进行一些数据处理的操作。

示例五：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate: ' + this.message)
  }
})

updated

这个钩子函数在Vue实例数据更新之后被调用，和mounted函数类似，可以访问到DOM元素进行一些DOM操作。

示例六：

new Vue({ 
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  updated() {
    console.log('updated: ' + this.message)
  }
})

销毁阶段

beforeDestroy

这个钩子函数在Vue实例销毁之前被调用，可以在这里进行一些组件即将销毁前的清理操作。

示例七：

new Vue({
  beforeDestroy() {
    console.log('beforeDestroy')
    //清除定时器等操作
  }
})

destroyed

这个钩子函数在Vue实例被销毁后被调用，可以在这里进行一些异步清理操作。

示例八：

new Vue({
  destroyed() {
    console.log('destroyed')
    //清理缓存等操作
  }
})

总结

Vue的生命周期是Vue组件开发中非常重要的一项功能，通过生命周期函数的调用，开发者可以掌握组件运行时的各个阶段以及进行适当的处理。有了这些生命周期函数，我们可以更加方便快捷地对组件进行拓展和维护。