vue hooks

// Vue Hooks 示例代码

// 安装 vue-hooks 库
// npm install @vue/composition-api
// 或者使用 CDN 引入

import { createApp } from 'vue';
import { onMounted, ref } from '@vue/composition-api';

// 创建一个 Vue 组件
const App = {
  setup() {
    // 使用 ref 创建一个响应式变量
    const count = ref(0);

    // 使用 onMounted 钩子函数，在组件挂载时执行
    onMounted(() => {
      console.log('组件已挂载');
    });

    // 返回模板中使用的数据和方法
    return {
      count,
      increment: () => {
        count.value++;
      }
    };
  },

  template: `
    <div>
      <p>当前计数: {{ count }}</p>
      <button @click="increment">增加</button>
    </div>
  `
};

// 创建并挂载 Vue 应用
const app = createApp(App);
app.use(@vue/composition-api); // 注册 Composition API 插件
app.mount('#app');

解释说明：

1. 引入依赖：我们首先引入了 @vue/composition-api，它为 Vue 提供了 Composition API 的功能。
2. 创建 Vue 组件：通过 setup 函数定义组件的逻辑。setup 是 Composition API 的入口函数。
3. 使用 ref：ref 用于创建一个响应式的数据属性 count，其初始值为 0。
4. 使用 onMounted：这是一个生命周期钩子函数，当组件挂载完成后会执行其中的代码。
5. 返回数据和方法：setup 函数返回的对象中的属性可以在模板中直接使用。
6. 模板部分：定义了一个简单的模板，包含一个显示计数的 <p> 标签和一个点击按钮来增加计数。

注意事项：

• 如果你使用的是 Vue 3.x，可以直接使用内置的 Composition API，无需额外安装 @vue/composition-api。
• 确保在项目中正确配置了 Composition API 插件。

如果你有任何问题或需要进一步的帮助，请随时告诉我！