setup里面生命周期函数的新写法>在setup里面使用生命周期函数的时候，生命周期函数前面需要加on >并且需要从vu

在setup里面使用生命周期函数的时候，生命周期函数前面需要加on

并且需要从vue里面引入生命周期函数，并在setup里面return出去

<!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({
      // setup函数
      setup() {
        // setup里面使用，需要先引入,并且写在setup里面需要在前面加个on
        // 生命周期函数里面是一个箭头函数作为参数
        const { onCreated, onBeforeCreate, onMounted, onBeforeMounted,onBeforeUpdate,onUndated,onBeforeUnmounte,onUnmounted } = Vue;
        onBeforeCreate(() => {
          console.log("创建之前执行onBeforeCreate");
        });
        onCreated(() => {
          console.log("创建之后执行onCreated");
        });
        onMounted(() => {
          console.log("挂载之后执行onMounted");
        });
        onBeforeMounted(() => {
          console.log("挂载之前执行onBeforeMounted");
        });
        onBeforUpdated(() => {
          console.log("数据更新之前执行onBeforeUpdated");
        });
        onUpdated(() => {
          console.log("更新之后执行onUpdatede");
        });
        onBeforeUnmounte(() => {
          console.log("销毁之前执行onBeforeUnmountd");
        });
        onUnmounted(() => {
          console.log("销毁之后执行onUnmounted");
        });
        return { onCreated, onBeforeCreate, onMounted, onBeforeMounted,onBeforeUpdate,onUndated,onBeforeUnmounte,onUnmounted };
      },
      // 模板
      template: `
        <h1></h1>
        `,
    });
    const vm = app.mount("#root");
  </script>
</html>