Vue 3.4.5深度解析：从基础到高级，掌握Composition API与全局API精髓

一、基础函数&特性

1. setup() 函数

• 作用：setup() 是Vue 3引入的一个新的组件选项，用于定义组件的逻辑。它在组件初始化阶段被调用，替代了Vue 2中的data、methods等选项。
• 特点：
  • 接收props和context作为参数。
  • 返回的对象将被合并到组件的渲染上下文中。
  • 可以使用Composition API函数来组织逻辑。
• 使用示例:

  import { ref } from 'vue'
  export default {
    setup(props, context) {
      const count = ref(0)
      
      const increment = () => {
        count.value++
      }
      
      return { count, increment }
    }
  }
  

2. ref() 函数

• 作用：用于创建一个响应式的引用对象，可以用来包裹基本类型值或对象，使其能够在模板中响应式更新。
• 用法:

  const count = ref(0)
  

• 特点：.value属性访问实际值，适合简单的数据绑定。

3. reactive() 函数

• 作用：用于创建一个响应式对象，适用于更复杂的对象或数组结构。
• 用法:

  const state = reactive({ count: 0 })
  

• 特点：直接修改对象属性即可触发视图更新，适合有多个状态属性的情况。

4. computed() 函数

• 作用：创建计算属性，基于依赖项自动缓存结果。
• 用法:

  const doubleCount = computed(() => state.count * 2)
  

• 特点：只有当依赖项改变时才会重新计算。

5. watch() 函数

• 作用：监视数据变化并执行回调。
• 用法:

  watch(count, (newValue, oldValue) => {
    console.log(`count changed from ${oldValue} to ${newValue}`)
  })
  

• 特点：支持异步处理，可以有多种配置选项。

6. watchEffect() 函数

• 作用：类似于watch()，但自动追踪依赖项并执行回调。
• 用法:

  watchEffect(() => {
    console.log(`count is now ${count.value}`)
  })
  

• 特点：不需要显式指定依赖，每次依赖变化都会执行。

7. toRef() 和 toRefs()

• 作用：将响应式对象的属性转换为独立的ref，便于在模板或逻辑中单独使用。
• 用法:

  const stateRef = reactive({ count: 0 })
  const countRef = toRef(stateRef, 'count')
  

• 特点：方便解构和传递响应式对象的单个属性。

8. onBeforeMount(), onMounted(), onBeforeUpdate(), onUpdated(), onUnmounted() 等生命周期钩子

• 作用：Vue 3通过Composition API提供了新的生命周期钩子函数，用于在组件的不同生命周期阶段执行代码。
• 用法:

  onMounted(() => {
    console.log('Component mounted.')
  })
  

• 特点：更细粒度的控制，可以组合使用。

9. provide() 和 inject()

• 作用：用于祖先组件向后代组件注入数据，实现跨级组件通信。
• 用法:

  // 祖先组件
  provide('theme', 'dark')
  
  // 子孙组件
  const theme = inject('theme')
  

• 特点：简化了状态管理和跨组件共享数据的方式。

10. 自定义渲染函数 render()

• 作用：提供完全控制渲染逻辑的能力，用于替代模板语法。
• 用法:

  export default {
    render() {
      return h('div', {}, 'Hello World!')
    }
  }
  

• 特点：高度灵活，适合复杂UI或动态生成DOM结构。

二、核心宏函数（单文件组件方向）

在Vue 3中，引入了Composition API来提供一种更灵活和强大的方式来组织组件逻辑。其中，defineProps、defineEmits、defineExpose、defineSlots 和 defineOptions 是几个核心宏函数，用于定义组件的不同方面。

1. defineProps

• 作用：用于在