下面是一个基础的 Vue.js 3.x 组件模板代码，其中包含了常用的生命周期函数：

<template>
  <div>
    <!-- vue 模板代码 -->
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUpdated, onUnmounted } from 'vue';

export default defineComponent({
  name: 'MyComponent',

  data() {
    return {
      // 组件数据
    };
  },

  props: {
    // 组件属性
  },

  computed: {
    // 计算属性
  },

  methods: {
    // 组件方法
  },

  // 生命周期钩子函数
  beforeCreate() {
    // 组件实例被创建前调用
  },

  created() {
    // 组件实例被创建后调用，在此可以调用组件实例的方法和访问组件实例的数据
  },

  beforeMount() {
    // 组件挂载到页面前调用
  },

  mounted() {
    // 组件挂载到页面后调用，在此可以操作组件内部 DOM 元素
  },

  beforeUpdate() {
    // 组件更新前调用
  },

  updated() {
    // 组件更新后调用
  },

  beforeUnmount() {
    // 组件卸载前调用，在此可以做一些清理工作，如取消定时器等
  },

  unmounted() {
    // 组件卸载后调用
  },

  // 使用 onMounted、onUpdated 和 onUnmounted 函数替代生命周期钩子函数
  // onMounted、onUpdated 和 onUnmounted 函数是 Vue.js 3.x 中新增的函数式组件 API，
  // 可以用于在函数式组件中使用生命周期钩子函数

  setup() {
    onMounted(() => {
      // 组件挂载到页面后调用，在此可以操作组件内部 DOM 元素
    });

    onUpdated(() => {
      // 组件更新后调用
    });

    onUnmounted(() => {
      // 组件卸载后调用，在此可以做一些清理工作，如取消定时器等
    });
  },
});
//</script>
//在上述代码中，我们定义了一个名为 MyComponent 的组件，其中包含了常用的生命周期钩子函数（也可以
//使用 onMounted、onUpdated 和 onUnmounted 替代），你可以根据自己的需要进行调整和扩展。