vue3常用的api总结

Vue3 常用的 API 主要包括以下几个部分：

1. 创建和挂载实例：

• createApp：创建一个应用实例。
• mount：将应用挂载到指定元素上。

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

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

1. 响应式系统：

• 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)
})

1. 模板语法：

• 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>

1. 组件：

• 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 }
  },
})