# 實作紀錄：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')
​