{site_name}

{site_name}

🌜 搜索

Vue 3.0 应用 API 是指在 Vue.js 3.x 版本中,用于创建和管理 Vue 应用的一组全新 API

前端 𝄐 0
vue3 app,vue3 app.use,vue3.0使用,vue3.0用什么ui,vue3axios,vue3开发app
Vue 3.0 应用 API 是指在 Vue.js 3.x 版本中,用于创建和管理 Vue 应用的一组全新 API。这些 API 包括了创建应用、组件、指令、插件以及应用级别的配置等功能。

以下是几个常用的 Vue 3.0 应用 API 示例:

1. createApp(): 创建一个 Vue 实例,用于挂载到 HTML 文档

javascript
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');


2. 状态管理(state): 使用 reactive() 函数来创建响应式数据对象

javascript
import { reactive } from 'vue';

const state = reactive({
count: 0,
message: 'Hello!'
});

console.log(state.count); // 输出 0
state.count++; // 对 count 进行修改
console.log(state.count); // 输出 1


3. 自定义指令(directive):使用 directive() 函数创建自定义指令

javascript
import { directive } from 'vue';

// 注册一个名为 v-focus 的全局自定义指令
const focusDirective = directive('focus', {
// 当被绑定的元素挂载到 DOM 上时,聚焦元素
mounted(el) {
el.focus();
}
});

// 在组件中使用自定义指令
<template>
<input v-focus />
</template>

<script>
export default {
directives: {
focus: focusDirective
}
}
</script>


4. 插件(plugin):使用 createApp().use() 方法安装插件

javascript
import { createApp } from 'vue';
import MyPlugin from './plugins/my-plugin';

const app = createApp();
app.use(MyPlugin);


5. 其他常用 API:

- watch(): 监听数据变化
- computed(): 计算属性函数
- provide() / inject(): 向子组件注入依赖
- onMounted(): 在组件挂载时执行代码