>[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"; ~~~