iT邦幫忙

2024 iThome 鐵人賽

DAY 2
3
Modern Web

Vue 3 初學者:用實作帶你看過核心概念系列 第 2

Vue 3 用實作帶你看過核心概念 - Day 2:命令式編程 vs 聲明式編程

  • 分享至 

  • xImage
  •  

文章背景圖

目錄

  • 命令式編程
  • 聲明式編程
  • 總結

命令式編程

還記得我們在使用純 HTML 和 JavaScript 時,如何實現按下按鈕來變更文字顏色嗎?讓我們一起回想一下什麼是命令式宣告。

命令式編程基本上就是直接指定 DOM 元素進行監聽或操作(例如:addEventListener、document.querySelector),透過具體的步驟更新畫面。

每多一個功能,都要清楚描述這個功能觸發要執行的每個動作(EX:新增項目)

除了資料要更新處理渲染畫面也需要負責,一手包辦全部

以下會以改動文字顏色為例進行功能說明:

流程白話來說:

  1. 監聽按鈕點擊事件
  2. 確認要變更文字顏色的元素是哪一個
  3. 確認要改變的顏色
  4. 渲染元素成改變完後的顏色

命令式編程

功能說明:

  • 按下 "樣式切換" 按鈕後,讓 "我是命令式宣告" 的文字顏色在紅色和綠色之間切換。

以下是實現這個功能命令式編程的代碼示例:

👉 codepen javaScript 命令式編程實作連結

HTML(畫面):

<div class="card">
  <div class="text">我是命令式宣告</div>
  <button class="btn">命令式宣告-樣式切換</button>
</div>

JavaScript(控制器):

// DOM元素
const mycard = document.querySelector('.text')
const button = document.querySelector('.btn')

// 渲染畫面功能
function render(color){
  mycard.style.color = color;
}

// 按下按鈕切換當前文字的顏色
button.addEventListener('click', function(){
  const currentColor = mycard.style.color === 'red' ? 'green' : 'red';
  render(currentColor);
})

// 初始化將指定文字渲染成紅色
render('red')

聲明式編程

在命令式編程中,我們需要手動監聽事件(addEventListener),並直接操作特定 DOM 元素(document.querySelector)來達成變化。然而,這樣的方式會隨著功能增加而變得愈發繁瑣。此時,開發者可能會希望有更方便的方法來管理這些流程,比如通過聲明式編程。

那麼,如果改成聲明式編程會變成什麼樣子呢?

白話來說就是:

  1. 事件處理和資料綁定由框架自動完成:在 Vue 中,這個過程主要透過模板 (Template) 來實現,模板語法與 HTML 相似。這代表著開發者不再需要手動通過原生 HTML 進行事件監聽,也不需要直接操作 DOM 來更新元素的內容,所有的畫面渲染和資料綁定都在模板中進行
  2. 資料變化會自動觸發畫面更新:開發者可以專注於業務邏輯和資料變更,因為 Vue 會自動監聽資料變數的變化,並透過其反應式系統自動比較虛擬 DOM 與實際 DOM 的差異,最終更新成實際的 DOM 元素,無需手動干預。

可以透過以下流程圖更清楚 Vue 聲明式編程的運作方式

聲明式宣告

透過維護框架中的資料,框架將自動處理監聽和渲染的工作,讓使用者能專注於資料的維護。

⭐ 在流程圖中可以看到,模板語言會被編譯成虛擬 DOM 結構。實際上,我們也可以直接使用 JavaScript 撰寫渲染函數,這是一種替代模板語法的方式。以下提供了使用模板語法與直接透過渲染函數撰寫虛擬 DOM 的對比範例。

👉 Vue3 Options API 模板語言實做連結
👉 Vue3 javaScript 渲染函數建構虛擬 DOM 物件實做連結


接著,讓我們來看看如何用 Vue 的聲明式編程來完成相同的功能。

這邊直接帶入Vue的 Options 寫法(先不要被嚇到(っ・Д・)っ

👉 codepen Vue3 Options API 聲明式編程實做連結

Vue Template(畫面)::

<div id="app">
  <div class="card">
    <!--     將 textColor 變數繫結在 p style 屬性上 -->
    <p :style="{color: textColor}">我是聲明式宣告</p>
    <!--     將 changeColor 函式綁定在 button click 事件上 -->
    <button @click="changeColor" >聲明式宣告-樣式切換</button>
  </div>
</div>

Vue JavaScript(數據維護及邏輯處理):

const { createApp } = Vue;

const app = createApp({
  // data 存放響應式變數的地方
  data() {
    return {
      textColor: "red"
    };
  },
  // methods 存放函式的地方
  methods: {
    changeColor() {
      this.textColor = this.textColor === "red" ? "green" : "red";
    }
  }
});

// 將 vue 實例掛載到 id=app 的元素上
app.mount("#app");

總結

  • 命令式編程:需要開發者手動操作 DOM 元素,隨著功能變多,維護成本會逐漸增加。
  • 聲明式編程:強調通過物件描述介面與響應式資料的關係,當資料變動時,框架會自動更新畫面,減少手動操作,並提升開發效率。

上一篇
Vue 3 用實作帶你看過核心概念 - Day 1:前言介紹
下一篇
Vue 3 用實作帶你看過核心概念 - Day 3:使用 Vite 建構工具搭建 Vue 專案
系列文
Vue 3 初學者:用實作帶你看過核心概念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言