Vue3 Composition API

setup 函数

export default {
  setup(props, context) {
    // props 是响应式的
    console.log(props.title)
    
    // context 包含 attrs, slots, emit, expose
    console.log(context.attrs)
    console.log(context.slots)
    console.log(context.emit)
    
    return {
      // 返回的内容会暴露给模板
    }
  }
}

script setup

<script setup>
// 自动暴露给模板
const count = ref(0)
const increment = () => count.value++
</script>

响应式 API

ref

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

reactive

import { reactive } from 'vue'

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

state.count++

toRef / toRefs

import { reactive, toRef, toRefs } from 'vue'

const state = reactive({
  foo: 1,
  bar: 2
})

// 转换单个属性
const fooRef = toRef(state, 'foo')

// 转换所有属性
const stateRefs = toRefs(state)

readonly

import { reactive, readonly } from 'vue'

const original = reactive({ count: 0 })
const copy = readonly(original)

original.count++ // 可以修改
copy.count++ // 警告

计算属性

import { ref, computed } from 'vue'

const count = ref(1)

// 只读计算属性
const double = computed(() => count.value * 2)

// 可写计算属性
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

侦听器

watch

import { ref, watch } from 'vue'

const count = ref(0)

// 侦听单个源
watch(count, (newValue, oldValue) => {
  console.log(`count: ${oldValue} -> ${newValue}`)
})

// 侦听多个源
const firstName = ref('')
const lastName = ref('')

watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log(`Name changed`)
})

// 侦听响应式对象
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (newValue, oldValue) => {
    console.log(`count: ${oldValue} -> ${newValue}`)
  }
)

watchEffect

import { ref, watchEffect } from 'vue'

const count = ref(0)

watchEffect(() => {
  console.log(count.value)
})

// 停止侦听
const stop = watchEffect(() => {
  console.log(count.value)
})

stop()

生命周期钩子

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      console.log('Before Mount')
    })
    
    onMounted(() => {
      console.log('Mounted')
    })
    
    onBeforeUpdate(() => {
      console.log('Before Update')
    })
    
    onUpdated(() => {
      console.log('Updated')
    })
    
    onBeforeUnmount(() => {
      console.log('Before Unmount')
    })
    
    onUnmounted(() => {
      console.log('Unmounted')
    })
  }
}

依赖注入

// 父组件
import { provide } from 'vue'

export default {
  setup() {
    provide('message', 'Hello from parent')
  }
}

// 子组件
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}