實作紀錄：To-Do List 三重奏之一：Vue+Vite

tags: Vue JavaScript CSS HTML

實作網址

gh-pages
https://judy-nihao.github.io/vue-todo-list

GitHub Repo
https://github.com/Judy-Nihao/vue-todo-list/tree/main

實作功能

• 輸入清單使用者姓名
• 新增刪除待辦事項
• 已新增事項可打字編輯
• 清除已完成事項、清除全部事項
• 重整頁面紀錄清單狀態
• 手機版調整畫面點擊體驗
• 電腦版設置按鈕 hover 提示

筆記

「ToDo List 三重奏」是我為了體會原生JS和框架的邏輯差異，以及比較兩大框架 Vue 和 React 自己使用起來的上手程度，來決定往後偏好優先深入研究的對象，我以 ToDo List 的實作當作比較基礎，製作出三個 ToDo List ，兩種框架共同使用 Vite 作為前端建構工具。

框架跟原生JS的邏輯真的很不一樣，初次接觸腦袋打結好幾遍。以前的認知是 HTML 管結構，CSS管樣式，JavaScirpt 管互動與計算，大家分工各做各的，但是一進入到框架，一時之間好像「大家一起上啊！～」在一個 .vue 檔案裡面會出現 <template> 、 <script> 和 <style>，乍看長得很眼熟但又多出很多沒見過的「方法」、「函式」、「屬性」等等，以前學到的分開管理彷彿又全部融在一起。漸漸地才知道「元件化」的概念，隨著網站內容越來越龐大，管理和修改就會越來越複雜。元件化的概念，讓每個元件有獨立的骨架、外貌和行為能力，需要動用誰再把那個元件引入就好，如此就可以將龐大的網頁拆分成小模組，如果要針對特定功能進行維護，只要處理與之相關的模組即可，不用全部扯進來，熱門框架崛起，大概是從這樣的使用需求出發？

實作過程中腦袋大放煙火和地震海嘯，先講最終結論，Vue 確實對我來說比較直覺！

感到最驚奇的部分，是在進行「表單 input 」和其他元素的雙向綁定時， v-model 語法糖真的很快速直觀，本來原生 JS 要進行的一堆步驟：命名變數抓取DOM元素、取得元素 value、onchange 事件監聽，用 innerHTML 把抓到的值存進另一個變數等等，居然用一個 v-model 就可以把資料雙向綁定同步顯示了，吃了好幾斤有夠飽。

兩種框架其實在精神上都有一些共同的邏輯，例如：變數本身都是不可以修改的 ( immutable )，必須再多包一層東西，透過更改value、或是去陣列解構賦值的方式，去修改變數內容。

而不是像原生 JS 直接使用「等號」賦值。

Vue 是用 ref()

變數的值要用 ref() 包起來，要取得 count 的值時要寫 conut.value ，變數內的值變得像是某種屬性。

import { ref } from 'vue'

const count = ref(1)
console.log(count.value) // 1

React 則是用 useState()

用解構賦值方式處理變數。「解構賦值」可以把陣列或物件中的資料解開擷取成為獨立變數。

想要更改變數 count 存取的值，必須透過函式 setCount 去更改。

import { useState } from 'react';

// 這是陣列的解構賦值
const [count, setCount] = useState(5);
setCount(10); // count 的值就會變成 10

以下實作筆記陸續增補中 …

---

Composition API ( 組合式 API ) 寫法
Vue Hooks：Hooks 可以想像成 Vue 自己定義的特殊方法，要在檔案名稱是 .vue 結尾的元件案內引入使用，要用到誰就引入誰即可，import { ref, onMounted, computed, watch } from "vue"。

src 資料夾是 Vue 專案的核心，裡面有：

• App.vue
• main.css
• main.js：註冊全域元件，註冊在這邊的元件在專案內各處都能使用。

index.html 內容變得很簡單，透過 <script type="module" src="/src/main.js"></script> 把所有內容渲染到 <div id="app"></div> 裡面。

App.vue

是 Vue 的根節點元件，主要由三個部分組成： <template> 、 <script> 以及 <style>，分別包含了元件的模板、指令碼和樣式。<template> 裡面放的就是 HTML 模板，<script> 裡面引入要使用到的 Vue hooks，有點像是 Vue 自己定義的特殊函式，如果

main.css

一般的 css 檔，會在 main.js 裡面 import，使樣式能被全域使用。

main.js

註冊「全域性元件」或 import 其他 library，若想要使用 FontAwesome icon 也是在這邊 import。外部的 .css ，想要CSS 樣式套用到全域上，也要記得在這裡引入。這個檔案中會初始化 Vue App createApp(App) 並定義要將 App 掛載mount到 index.html檔案中的哪個 HTML 元素。

import { createApp } from 'vue'
import App from './App.vue'
import './main.css'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faTrashCan } from '@fortawesome/free-regular-svg-icons'
import { faCirclePlus } from '@fortawesome/free-solid-svg-icons'

library.add(faTrashCan,faCirclePlus)
​
createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')
​