Vue实例生命周期以及图示

原创已于 2022-02-22 12:38:36 修改 · 529 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

于 2018-11-02 16:17:16 首次发布

vue.js入门专栏收录该内容

93 篇文章

订阅专栏

本文深入解析Vue.js的生命周期，从创建到销毁各个阶段的自动执行函数，如beforeCreate、created、beforeMount等，并通过示例代码展示每个阶段的执行时机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>理解Vue中的生命周期函数</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // 生命周期函数: 在某一时刻会自动执行的函数
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'
      }
    },
    // 在实例生成之前会自动执行的函数
    beforeCreate() {
      console.log('beforeCreate')
    },
    // 在实例生成之后会自动生成的函数
    created() {
      console.log('created')
    },
    // 在模版已经变成函数之后立即自动执行的函数
    // 或理解为 在组件内容被渲染到页面之前立即自动执行的函数
    beforeMount() {
      console.log('beforeMount')
    },
    // 在组件内容被渲染到页面之后自动执行的函数
    mounted() {
      console.log('mounted')
    },
    // 当数据发生变化时会自动执行的函数
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    // 当数据发生变化，页面重新渲染后，会自动执行的函数
    updated() {
      console.log('updated')
    },
    // 当 Vue 实例销毁时会自动执行的函数
    beforeUnmount() {
      console.log('beforeUnmount')
    },
    // 当Vue 应用失效时，且DOM完全销毁之后，自动执行的函数
    unmounted() {
      console.log('unmounted')
    },
    template: "<div>{{message}}</div>"
  });
  const vm = app.mount('#root');
</script>
</html>