vue组合式api笔记

Vue 3.0 推出了一种全新的 API，即组合式 API，它可以让我们更好地组织 Vue 组件代码。这里是一些 Vue 组合式 API 的笔记：

### setup

`setup` 是组合式 API 中的一个钩子函数，它在 `beforeCreate` 之前被调用。`setup` 函数接收两个参数：

- `props`: 组件的属性对象
- `context`: 组件上下文对象

`setup` 函数必须返回一个对象，这个对象包含组件内部需要用到的数据、方法等。

import { ref } from 'vue'

export default {
  props: {
    msg: String
  },
  setup(props, context) {
    const count = ref(0) // ref 可以用来定义响应式数据
    const increase = () => count.value++

    return {
      count,
      increase
    }
  }
}

在组件模板中，可以直接使用 `count` 和 `increase`，它们都是响应式的。

### reactive

`reactive` 可以用来创建一个响应式的对象。

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  msg: 'Hello'
})

在模板中，可以直接使用 `state.count` 和 `state.msg`。

### ref

`ref` 可以用来创建一个响应式的值。

import { ref } from 'vue'

const count = ref(0)

在模板中，可以直接使用 `count.value`。

### computed

`computed` 可以用来定义一个计算属性。

import { computed, ref } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

在模板中，可以直接使用 `doubleCount`。

### watch

`watch` 可以用来监听一个响应式值的变化。

import { watch, ref } from 'vue'

const count = ref(0)

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

### 生命周期钩子函数

组合式 API 中，可以使用 `onBeforeMount`、`onMounted`、`onBeforeUpdate`、`onUpdated`、`onBeforeUnmount`、`onUnmounted` 等函数来替代传统的生命周期钩子函数。

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('mounted')
    })

    onUnmounted(() => {
      console.log('unmounted')
    })
  }
}

以上是 Vue 组合式 API 的一些笔记，希望对你有所帮助。