front-end-example/08-vue3/11-before-hooks-and-expose/starter.js

const {
  createApp,
  ref,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount,
} = Vue;

createApp({
  components: {
    ChildPanel: {
      template: `
        <div>
          <p>我是子组件</p>
          <input ref="inputEl" type="text" placeholder="等待父组件调用 focus" />
        </div>
      `,
      setup(props, { expose }) {
        const inputEl = ref(null);

        onBeforeMount(() => {
          // 任务：输出 beforeMount 日志
        });

        onBeforeUpdate(() => {
          // 任务：输出 beforeUpdate 日志
        });

        onBeforeUnmount(() => {
          // 任务：输出 beforeUnmount 日志
        });

        function focusInput() {
          // 任务：聚焦 inputEl
        }

        // 任务：通过 expose 暴露 focusInput

        return {
          inputEl,
        };
      },
    },
  },
  setup() {
    const showChild = ref(true);
    const childPanel = ref(null);

    function focusChildInput() {
      // 任务：调用 childPanel.value 暴露出来的方法
    }

    return {
      showChild,
      childPanel,
      focusChildInput,
    };
  },
}).mount("#app");