VueUse

我覺得有點像在用原生JS（指令名的部分），但方便、簡潔了許多。

VueUse 是什麼？

• Vue提供給我們的外掛方法，像是Vue的工具集。
• VueUse 是基於Composition API 的實用函數集合。
  • Composition API：是api的集合，它涵蓋了
    • Reactivity API，例如 ref()、reactive()
    • Lifecycle Hooks，例如 onMounted()
    • Dependency Injection，例如 inject()

如何開始使用？

• 下指令：npm i @vueuse/core
• 或是如果已經安裝了的話，就在檔案中從 '@vueuse/core' 引入
• 寫法：import { 要使用的功能, 要使用的功能2 } from '@vueuse/core'
• VueUse中的函數，會回傳的是一個 refs，所以要得到其中的值，要寫 .value 來取得，也可以用 ES6 的物件解構語法來取得。

import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize()
console.log( width.value )
// 這樣才會得到螢幕寬度

常用到的功能

useEventListener、useWindowSize、…。

Vite

類似package，是一個打包工具。

稍微講一下 vite.config.js

• vite的設定檔
• 每次執行vite時(例如 npm run dev)，會自動解析根目錄內的 vite.config.js ，依照該內容打包專案。
• 常常會看到 import { … } from '@/composables/…' 的用法，'@' 是用來取代 './src'。在vite.config.js 已經事先寫好了路徑名，所以開發時可以直接寫 @/... 作為路徑。

Vue3 周邊工具簡單整理

nuxt → 改變網頁渲染方式的工具。

pinia（、vuex） → 共用儲存庫、狀態管理工具。

vue-router → 管理路由的方法。

vueUse → 實用函數工具集。

vite → 打包工具。

axios(這要引入)、fetch(這是原生的) → 呼叫API的工具。

另外沒介紹到的還有 vue CLI、Vue的UI庫。

結語

最後一天！今天的內容其實很雜，其實是我對vue的熟悉程度還不到可以長篇大論，所以就是幾個小主題但不深入，並且最後來個簡單的整理。

第31天，希望我還會再打一篇心得，我最會打心得了(誤)。

參考

vueuse
https://vuejs.org/guide/extras/composition-api-faq.html
物件解構
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
有畫Vue3生態圈心智圖
https://zhuanlan.zhihu.com/p/617291894?utm_id=0