Vue3 常用的 API 主要包括以下几个部分：
- 创建和挂载实例：
createApp：创建一个应用实例。mount：将应用挂载到指定元素上。
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
- 响应式系统：
reactive：将一个普通对象转换为响应式对象。ref：创建一个响应式引用。computed：创建一个计算属性。watch：监听数据变化并执行回调函数。
import {
reactive, ref, computed, watch } from 'vue'
const state = reactive({
count: 0 })
const countRef = ref(0)
const countPlusOne = computed(() => state.count + 1)
watch(state, (newState, oldState) => {
console.log('状态变化：', newState, oldState)
})
- 模板语法：
v-if：条件渲染。v-for：列表渲染。v-bind：绑定属性。v-on：绑定事件。v-model：双向数据绑定。v-html：将字符串解析为 HTML。v-text：显示文本内容。v-show：根据条件显示/隐藏元素。v-once：只渲染一次元素。v-pre：跳过编译过程，显示原始 HTML 代码。v-cloak：解决 CSS 加载慢导致的闪烁问题。v-on:click.stop：阻止事件冒泡。v-slot：插槽语法。
<template>
<div>
<p v-if="show">Hello, Vue!</p>
<ul>
<li v-for="item in items" :key="item.id">{
{ item.name }}</li>
</ul>
<button @click="increment">增加</button>
<input v-model="message" />
<p v-html="htmlContent"></p>
</div>
</template>
- 组件：
defineComponent：定义一个组件。props：定义组件的 props。emit：触发自定义事件。setup：组件的 setup 函数，用于处理组件的逻辑。provide/inject：实现祖先组件向后代组件传递数据。
import {
defineComponent, ref } from 'vue'
export default defineComponent({
name: 'MyComponent',
props: {
message: String },
setup(props) {
const count = ref(0)
const increment = () => {
count.value++ }
return {
count, increment }
},
})
