Vue生命周期详解

Vue.js 是一个 MVVM 框架，在组件渲染过程中，每个组件都有自己的生命周期。这里将详细介绍 Vue 组件的生命周期函数。

Vue 组件生命周期可以分为四个阶段：

创建阶段 create
挂载阶段 mount
更新阶段 update
销毁阶段 destroy

创建阶段 `create`

在创建阶段，Vue 组件将从组件配置对象的初始化属性中读取数据并设置组件状态。这个阶段中的钩子函数为 beforeCreate 和 created。

示例代码：

<template>
  <div> {{ message }} </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  beforeCreate() {
    console.log('beforeCreate:', this.message) // undefined
  },
  created() {
    console.log('created:', this.message) // 'Hello, Vue!'
  },
}
</script>

在 beforeCreate 钩子函数中，组件实例中的 data 数据对象还没有被初始化，在这个阶段无法访问到 data 中的数据。而在 created 钩子函数中，data 数据对象已经初始化完成并且可以被访问。

挂载阶段 `mount`

挂载阶段是当组件被添加到页面时的阶段，它只会被执行一次。这个阶段的钩子函数是 beforeMount 和 mounted。

示例代码：

<template>
  <div> {{ message }} </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  beforeMount() {
    console.log('beforeMount') // beforeMount
  },
  mounted() {
    console.log('mounted') // mounted
  },
}
</script>

在 beforeMount 钩子函数中，组件的模板还没有被渲染出来，在这个阶段无法访问组件的 DOM 节点。而在 mounted 钩子函数中，组件的模板已经渲染出来，可以访问组件的 DOM 节点了。

更新阶段 `update`

更新阶段是在组件被更新时触发的阶段，每当组件的状态（props 或 data）发生变化时，都会触发这个阶段。这个阶段中的钩子函数为 beforeUpdate 和 updated。

示例代码：

<template>
  <div> {{ message }} </div>
  <button @click="updateMessage">Update</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    updateMessage() {
      this.message += '!'
    },
  },
  beforeUpdate() {
    console.log('beforeUpdate:', this.message) // 'Hello, Vue!'
  },
  updated() {
    console.log('updated:', this.message) // 'Hello, Vue!!'
  },
}
</script>

在 beforeUpdate 钩子函数中，组件状态（props 或 data）已经被修改，但是页面上显示的还是旧的状态。而在 updated 钩子函数中，组件状态已经被更新并且页面上也已经显示了最新的状态。

销毁阶段 `destroy`

销毁阶段是当组件从页面中被卸载时的阶段，这个阶段的钩子函数为 beforeDestroy 和 destroyed。

示例代码：

<template>
  <div> {{ message }} </div>
  <button @click="destroy">Destroy</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    destroy() {
      this.$destroy()
    },
  },
  beforeDestroy() {
    console.log('beforeDestroy') // beforeDestroy
  },
  destroyed() {
    console.log('destroyed') // destroyed
  },
}
</script>

在 beforeDestroy 钩子函数中，组件还没有被卸载，仍然可以访问组件的 DOM 节点。而在 destroyed 钩子函数中，组件已经被卸载，无法访问组件的 DOM 节点了。

以上是 Vue 组件的生命周期函数的详细解释。在 Vue.js 开发过程中，对组件的生命周期不同阶段执行的钩子函数的理解和使用，对于增强开发中的调试、优化、性能等方面有着非常实质性的帮助。

示例1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example1</title>
</head>
<body>
  <div id="app">
    <div>{{ message }}</div>
    <button @click="updateMessage">Update</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      },
      methods: {
        updateMessage: function () {
          this.message += '!'
        },
      },
      beforeUpdate () {
        console.log('beforeUpdate')
      },
      updated () {
        console.log('updated')
      },
    })
  </script>
</body>
</html>

当用户点击 “Update” 按钮时，页面上会显示 “Hello, Vue!!”，同时组件的状态也会更新，控制台中会分别打印出 “beforeUpdate” 和 “updated”。

示例2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example2</title>
</head>
<body>
  <div id="app">
    <div>{{ message }}</div>
    <button @click="destroy">Destroy</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      },
      methods: {
        destroy: function () {
          this.$destroy()
        },
      },
      beforeDestroy () {
        console.log('beforeDestroy')
      },
      destroyed () {
        console.log('destroyed')
      },
    })
  </script>
</body>
</html>

当用户点击 “Destroy” 按钮时，组件会被卸载，控制台中会分别打印出 “beforeDestroy” 和 “destroyed”。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue生命周期详解 - Python技术站