组合式API #

<!-- 选项式API -->
<script>
export default {
  data() {
    return {
      count: 0,
      name: '张三'
    }
  },
  computed: {
    doubled() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('组件已挂载')
  }
}
</script>

<!-- 组合式API -->
<script setup>
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const name = ref('张三')

const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}

onMounted(() => {
  console.log('组件已挂载')
})
</script>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    function increment() {
      count.value++
    }
    
    return {
      count,
      increment
    }
  }
}
</script>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<script setup>
const props = defineProps({
  title: String,
  count: {
    type: Number,
    default: 0
  }
})

console.log(props.title)
</script>

<script setup>
const emit = defineEmits(['update', 'delete'])

function handleClick() {
  emit('update', { id: 1 })
}
</script>

<script>
export default {
  setup(props, context) {
    // props - 响应式的props对象
    console.log(props.title)
    
    // context - 上下文对象
    // context.attrs - 非props属性
    // context.slots - 插槽
    // context.emit - 触发事件
    // context.expose - 暴露给模板引用
    
    return {}
  }
}
</script>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

onBeforeMount(() => {
  console.log('组件挂载前')
})

onMounted(() => {
  console.log('组件已挂载')
  // DOM操作、事件监听、定时器等
})

onBeforeUpdate(() => {
  console.log('组件更新前')
})

onUpdated(() => {
  console.log('组件已更新')
})

onBeforeUnmount(() => {
  console.log('组件卸载前')
  // 清理工作
})

onUnmounted(() => {
  console.log('组件已卸载')
  // 清理定时器、事件监听等
})
</script>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const timer = ref(null)

onMounted(() => {
  timer.value = setInterval(() => {
    console.log('定时器执行')
  }, 1000)
  
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  // 清理定时器
  clearInterval(timer.value)
  
  // 移除事件监听
  window.removeEventListener('resize', handleResize)
})

function handleResize() {
  console.log('窗口大小变化')
}
</script>

<script setup>
import { ref, watchEffect } from 'vue'

const userId = ref(1)

watchEffect((onCleanup) => {
  const controller = new AbortController()
  
  fetch(`/api/users/${userId.value}`, {
    signal: controller.signal
  })
    .then(res => res.json())
    .then(data => {
      // 处理数据
    })
  
  // 自动清理：下次执行前或组件卸载时调用
  onCleanup(() => {
    controller.abort()
  })
})
</script>

<!-- 祖先组件 -->
<script setup>
import { provide, ref } from 'vue'

const theme = ref('dark')
const user = ref({ name: '张三' })

provide('theme', theme)
provide('user', user)
</script>

<!-- 后代组件 -->
<script setup>
import { inject } from 'vue'

const theme = inject('theme')
const user = inject('user')

console.log(theme.value)  // 'dark'
</script>

<script setup>
import { inject } from 'vue'

// 提供默认值
const theme = inject('theme', 'light')

// 使用工厂函数
const config = inject('config', () => ({
  apiUrl: '/api',
  timeout: 5000
}))
</script>

<!-- 祖先组件 -->
<script setup>
import { provide, ref, readonly } from 'vue'

const state = ref({
  count: 0,
  user: null
})

// 提供只读状态
provide('state', readonly(state))

// 提供修改方法
provide('actions', {
  increment: () => state.value.count++,
  setUser: (user) => state.value.user = user
})
</script>

<!-- 后代组件 -->
<script setup>
import { inject } from 'vue'

const state = inject('state')
const actions = inject('actions')

function handleClick() {
  actions.increment()
}
</script>

// keys.js
export const ThemeKey = Symbol('theme')
export const UserKey = Symbol('user')
export const StateKey = Symbol('state')

<script setup>
import { provide, inject } from 'vue'
import { ThemeKey, UserKey } from './keys'

// 提供
provide(ThemeKey, 'dark')

// 注入
const theme = inject(ThemeKey)
</script>

<template>
  <input ref="inputRef">
  <button @click="focusInput">聚焦</button>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const inputRef = ref(null)

function focusInput() {
  inputRef.value.focus()
}

onMounted(() => {
  inputRef.value.focus()
})
</script>

<template>
  <Child ref="childRef" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const childRef = ref(null)

function callChildMethod() {
  childRef.value.someMethod()
}
</script>

<!-- Child.vue -->
<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

function someMethod() {
  console.log('子组件方法')
}

// 暴露给父组件
defineExpose({
  count,
  increment,
  someMethod
})
</script>

<template>
  <div v-for="item in items" :key="item.id" :ref="setItemRef">
    {{ item.name }}
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const items = ref([
  { id: 1, name: '项目1' },
  { id: 2, name: '项目2' }
])

const itemRefs = ref([])

function setItemRef(el) {
  if (el) {
    itemRefs.value.push(el)
  }
}

onMounted(() => {
  console.log(itemRefs.value)  // 所有DOM元素
})
</script>

// useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const doubled = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  function decrement() {
    count.value--
  }
  
  function reset() {
    count.value = initialValue
  }
  
  return {
    count,
    doubled,
    increment,
    decrement,
    reset
  }
}

<template>
  <div>
    <p>计数: {{ count }}</p>
    <p>双倍: {{ doubled }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script setup>
import { useCounter } from './useCounter'

const { count, doubled, increment, decrement, reset } = useCounter(10)
</script>

// useFetch.js
import { ref, watchEffect, toValue } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)
  
  async function fetchData() {
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch(toValue(url))
      data.value = await response.json()
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  }
  
  watchEffect(() => {
    fetchData()
  })
  
  return {
    data,
    error,
    loading,
    refetch: fetchData
  }
}

<script setup>
import { ref } from 'vue'
import { useFetch } from './useFetch'

const userId = ref(1)
const { data, error, loading, refetch } = useFetch(
  () => `/api/users/${userId.value}`
)
</script>

// useUser.js
import { reactive, toRefs } from 'vue'

export function useUser() {
  const state = reactive({
    user: null,
    loading: false,
    error: null
  })
  
  async function fetchUser(id) {
    state.loading = true
    state.error = null
    
    try {
      const response = await fetch(`/api/users/${id}`)
      state.user = await response.json()
    } catch (e) {
      state.error = e
    } finally {
      state.loading = false
    }
  }
  
  return {
    ...toRefs(state),
    fetchUser
  }
}

<script setup>
import { useUser } from './useUser'

const { user, loading, error, fetchUser } = useUser()

fetchUser(1)
</script>

// 组合式函数以use开头
export function useCounter() {}
export function useFetch() {}
export function useLocalStorage() {}

// 响应式变量使用描述性名称
const isLoading = ref(false)
const hasError = ref(false)
const userList = ref([])

import { toValue, toRef, unref } from 'vue'

export function useExample(source) {
  // toValue - 解包ref和getter
  const value = toValue(source)
  
  // 支持ref、reactive、getter作为参数
  const data = computed(() => {
    return fetchData(toValue(source))
  })
  
  return { data }
}

// 使用方式灵活
useFetch('/api/data')           // 字符串
useFetch(ref('/api/data'))      // ref
useFetch(() => `/api/${id}`)    // getter

// 返回ref或reactive对象
export function useCounter() {
  const count = ref(0)
  return { count }  // 返回ref
}

// 使用toRefs保持响应性
export function useUser() {
  const state = reactive({
    user: null,
    loading: false
  })
  return toRefs(state)  // 解构后仍保持响应性
}

// 返回只读对象
export function useStore() {
  const state = reactive({ /* ... */ })
  return {
    state: readonly(state),
    actions: { /* ... */ }
  }
}