你这是VUE2的写法，VUE3的写法是怎样的？

在Vue3中，由于采用了更严格的模式和更深层次的响应式系统，一些语法和API与Vue2有所不同。关于Vue3的组件写法，特别是涉及到模板、数据绑定和组件交互：

1. **setup()函数**：Vue3引入了新的 `setup()` 函数替换原有的 `<script>` 标签中的单文件组件编写方式。它返回一个函数，用于初始化组件的实例和声明依赖。示例如下：

import { defineComponent } from 'vue';

const MyComponent = defineComponent({
  setup(props, context) {
    const data = reactive({ message: 'Hello Vue 3!' });
    function handleClick() {
      data.message = 'Clicked!';
    }
    return { data, handleClick };
  }
});

这里，`reactive`是来自`@vue/reactivity`库，用来创建响应式的数据对象。

2. **Props与Slots**：props的定义和使用基本保持一致，但在模板里，需要使用`<template #default>...</template>`来指定slot的内容。

3. **自定义钩子**：Vue3推荐使用自定义钩子（如beforeCreate、created、mounted等），而不是直接在生命周期函数内操作DOM。

4. **ref和onUpdate**：使用`ref`代替`$refs`来获取DOM元素，`onUpdate`属性则用于在组件实例更新时触发回调。

5. **避免深度监听**：Vue3移除了Vue2中的`watch`深监听机制，改用`unref`配合`shallowRef`或`reactive`。