Vue hooks是Vue 3推出的全新特性，通過hooks可以讓Vue組件更加靈活，同時提升開發效率。與Vue 2的Options API類似，Vue hooks可以通過各種鉤子函數來響應組件的生命周期，以及處理組件內部的狀態管理和邏輯。

Vue hooks鉤子函數遵循一定的命名規則，以“use”為前綴，如“useEffect”、“useComputed”、“useRef”等等。每一個鉤子函數都擁有自己的功能和用途，開發者可以根據實際需求選擇使用。

import { reactive, computed, ref, watchEffect } from 'vue'
export default {
name: 'VueHooksDemo',
setup() {
// 創建響應式對象
const state = reactive({
count: 0,
message: 'Hello, Vue hooks!'
})
// 創建計算屬性
const doubleCount = computed(() =>state.count * 2)
// 創建ref對象
const inputRef = ref(null)
// 監聽響應式對象變化
watchEffect(() =>{
console.log(`Count has changed to ${state.count}`)
})
// 綁定按鈕事件
const handleClick = () =>{
state.count++
}
// 返回數據和方法
return {
state,
doubleCount,
inputRef,
handleClick
}
}
}

在setup函數中，我們使用了reactive、computed、ref和watchEffect四個Vue hooks來創建響應式對象、計算屬性、ref對象以及響應式對象的監聽。同時，我們也創建了一個handleClick函數，來響應組件內部的事件，并修改count的值。最后，我們把所有的數據和方法全部導出，以便在模板中使用。

與Vue 2的Options API相比，Vue hooks更加靈活，可以實現更多種類的功能，同時也更加面向函數式編程。開發者可以通過結合Vue Composition API和Vue hooks來編寫組件，從而提升開發效率和代碼質量。