Vue生命周期函数```js```不需要调用，在某一刻自动执行的函数```js```不需要调用，在某一刻自动执行的函数`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // 定义一应用，里面写跟组件的配置
    const app = Vue.createApp({
      // 变量
      data() {
        return {
          hello: "hello world",
        };
      },
      // 生命周期函数
      // 第一对

      beforeCreate() {
        console.log("beforeCreate: 在实例生成之前会自动执行的函数");
      },
      created() {
        console.log("created: 在实例生成之后会自动执行的函数");
      },
      //   第二对 挂载
      beforeMount() {
        console.log(
          "beforeMount: 在组件内容被渲染到页面之前自动执行的函数....."
        );
      },
      mounted() {
        console.log("mounted: 在组件内容被渲染到页面之后自动执行的函数");
      },
      // 第三对 dom里面是数据更新前后执行

      beforeupdate() {
        consloe.log(
          "  beforeUpdate: 当数据发生变化时会立即自动执行的函数。。。。"
        );
      },
      updated() {
        console.log(
          "updated: 当数据发生变化，页面重新渲染后，会自动执行的函数"
        );
      },
      // 第四对

      beforeUnmount() {
        console.log("  beforeUnmount: 当 Vue 应用失效时，自动执行的函数");
      },
      //   调用`app.unmount()`可以取消应用的挂载, 即让 Vue 应用失效
      unmounted() {
        console.log(
          "unmounted: 当 Vue 应用失效时，且 dom 完全销毁之后，自动执行的函数"
        );
      },
      template: `
        <h1>{{hello}}</h1>
        `,
    });
  </script>
</html>