>[success] # 簡單使用composition Api 1. 和`Option APi` 不同 `Composition API` 更加靈活 我們可以將邏輯像`React` 一樣封裝成`Hook`按照`React` 命名方式一般是以`use`作為文件名的開頭 2. 下面案例就是做一個 點擊按鈕時候進行數據累加功能  * hooks/useCounter.js ~~~js import { ref, computed } from 'vue' export default function () { const count = ref(0) const doubleCount = computed(() => { return count.value * 2 }) // 調用方法 const increment = () => count.value++ const decrement = () => count.value-- return { count, doubleCount, increment, decrement, } } ~~~ * 使用 ~~~js <template> {{ count }} {{ doubleCount }} <button @click="increment">++</button> <button @click="decrement">--</button> </template> <script setup> import { useCounter } from './hooks' const { count, doubleCount, increment, decrement } = useCounter() </script> <style></style> ~~~ >[danger] ##### 修改 標簽頁title hooks 1. 當我們相對頁面標簽的tiltle 屬性進行更改的時候，往往為了復用我們會封裝方法 ~~~ function setTitle(title){ document.title = title } ~~~ 在使用的時候只要調用`setTitle`方法并進行傳參使用即可 2. 如果用`hook` 的方法來分析 實際只要是`title` 值改變了就應該進行標簽頁title 的更換 * useTitle.js ~~~ import { ref, watch } from 'vue'; export default function(title = "默認的title") { const titleRef = ref(title); watch(titleRef, (newValue) => { document.title = newValue }, { immediate: true }) return titleRef } ~~~ * 使用 使用不再是 調用setTitle 方法，更多只是關心值的變化即可 ~~~html <template> {{ title }} </template> <script setup> import { useTitle } from './hooks' // 此時title 是一個ref 對象 const title = useTitle('新標題') setTimeout(() => { title.value = '更新標題' }, 1000) </script> <style></style> ~~~ >[danger] ##### useLocalStorage -- 自動保存LocalStorage 1. 當數據改變時候可以自動進行`localStorage` 的存取 ~~~ import { ref, watch } from 'vue' // export default function useLocalStorage(key, val) { // if (val) { // window.localStorage.setItem(key, JSON.stringify(val)) // } else { // window.localStorage.getItem(key) // } // } // const data = useLocalStorage(key) // 獲取值 // useLocalStorage(key,val) // 設置值 // // 做了一些邏輯操作后 ........ 重新賦值同一個key // useLocalStorage(key,val) // 使用hook export default function (key, val) { const valRef = ref(val) if (val) { window.localStorage.setItem(key, JSON.stringify(val)) } else { window.localStorage.getItem(key) } // 當值改變時候 幫助我們去進行localStorage 對應key 的賦值 watch(valRef, (newVal) => { window.localStorage.setItem(key, JSON.stringify(newVal)) }) return valRef } // 一個參數: 取值 // const data = useLocalStorage("name"); // // 二個參數: 保存值 // const data = useLocalStorage("name", "a"); // data.value = "bb"; ~~~