第三周-初探Vue框架

約 1087 字大約 4 分鐘

javascript weekly practice

2023-01-01

前言

第二周紀錄的主要學習內容是JavaScript的基礎&進階概念，而本周主要的學習內容是認識框架(Vue.js)。

在前端框架三支柱中(Angular、React、Vue)為什麼會選擇Vue來做學習呢? 其實是看中Vue框架主打的輕便性，另外也聽說官方文件易於閱讀學習，於是就果斷選擇Vue來入門。

三大框架簡單比較

Angular:
- 由Google support
- 各種功能完善，相對的學習曲線較高
- 需使用TypeScript
React:
- 由Facebook(Meta) support
- 使用JSX
- 需要接觸第三方插件
Vue:
- 由Vue團隊support
- 使用HTML寫法
- SFC將 HTML、JavaScript、CSS分開
- 漸進式框架

主要學習內容

為何要使用框架?

傳統網站開發使用HTML、CSS、JavaScript 將網站的骨架、樣式、邏輯控制分開的寫法在小型的網站上還能應付，然而當網站的架構逐漸擴大，開發維護上就會產生各種各樣的問題。

✒️網站互動元素開發

原先使用JavaScript操作DOM的方法很不直觀，儘管後來有出現 jQuery 可以使開發者有更完善與簡潔的方法來達成網頁元素的互動，但部分項目仍然會頻繁的操作DOM。而Vue採用模板語法的方式&監聽特定節點的值(宣告式渲染)來代替開發者實際操作DOM，可使開發者在開發複雜的互動UI時更加直觀。

✒️效能優化

開發者藉由JavaScript DOM API 可以操作&更改網頁的HTML元素，但操作DOM會增加網頁渲染的成本(Repaint or Reflow)，使得網頁效能較差。

因為這個理由，Vue使用了Virtual DOM 的概念。利用JavaScript物件紀錄現有的DOM結構，當資料狀態改變的時候建立Virtual DOM 與新的DOM結構，再利用演算法分析兩個DOM差異, 最後再根據紀錄來執行渲染的函式，完成實體DOM的更新。

Virtual DOM 的概念可以避免網頁效能低落。

✒️組件化UI

在現代複雜的網頁開發中，網站可能會重複出現元素(卡片畫面、按鈕、表格等)，將重複的元素寫成一個 組件(component) 能使得專案較易於開發&維護。

Vue中的SFC(single file component)中分為三個部分: <template> <script> <style> 分別對應HTML、JavaScript、CSS 。當定義好組件的內容後，透過import 的方式就可以重複使用組件。

Vue 的特色

再了解為何要使用框架並選擇學習Vue後，不免俗的要來介紹Vue的特色。理解框架的特色&使用情境對於學習Vue有很大的幫助。

⭐採用宣告式渲染

比起原生JavaScript 藉由DOM來更新UI的方法(指令式宣告)，Vue採用宣告式渲染(Declarative Rendering), 能讓開發者能更專注在UI & 資料的關係上。

Counter範例

import { createApp } from 'vue' 

createApp({ 
  data() { 
    return { 
	  count: 0 
    } 
  } 
}).mount('#app')

<div id="app"> 
  <button @click="count++"> 
    Count is: {{ count }} 
  </button> 
</div>