上一篇我們聊了 Vue 的基本語法，應該已經慢慢上手了吧？那這一篇我們就要來講一個前端框架裡面非常重要的觀念 單向綁定。這個名詞可能聽起來有點抽象，但其實概念超簡單，所以不用怕，我們會細細來說。

什麼是單向綁定？

想像一下，開發者有一個變數，將其傳到前端上渲染，因此這就稱作「單向綁定」，意味著他的資料流是「單向」的。

單向是啥？

一般來說，資料的流向是「從程式 -> 畫面」。因此當變數變動，畫面就會重新渲染，但使用者在畫面上操作並不會反過來影響變數。

舉例來說：

<template>
  <h1>{{ message }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const message = ref('哈囉 Vue!')
</script>

這裡我們有個變數 message，值是「哈囉 Vue!」。畫面上就會顯示 message 的值。
如果開發者在後端邏輯中把 message.value = '我愛鐵人賽'，那畫面也會跟著變成「我愛鐵人賽」。

這就是單向綁定：資料單方面影響畫面。

單向綁定的重點

開發者要知道，單向綁定是「安全」的，因為使用者不能直接改變資料。
舉個例子：天氣，一個好的天氣，往往可以讓一個人變得開心。天天都是壞天氣，天天都是壞心情。因此天氣「單方面」影響了人。而天氣就是程式，而人就是畫面。如果你有辦法透過畫面影響程式數據，那就被稱為「雙向綁定」，但本篇我們不會提到。

練習：做一個單向綁定的「時間顯示器」

我們來練習看看單向綁定的實際應用。題目是：做一個簡單的「時間顯示器」，會顯示目前時間，每秒鐘更新一次。

Thinking~

1. 建立一個變數 time，初始值是目前時間。
2. 使用 setInterval 每秒更新一次 time。
3. 畫面用插值語法 {{ time }} 顯示。

解答

<template>
  <div>
    <h1>現在時間：</h1>
    <p>{{ time }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const time = ref(new Date().toLocaleTimeString())

onMounted(() => {
  setInterval(() => {
    time.value = new Date().toLocaleTimeString()
  }, 1000)
})
</script>

<style>
h1 {
  color: #42b883;
}
p {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
</style>

一樣，我們就不看 style 了，我們直接看邏輯的部分。我們宣告了一個變數 time，其值為時間，並且轉成當地格式，且是字串。
再來我們透過 onMounted，在元件掛載時，每秒更新一次。這邊要注意的是 onMounted，這個我們還沒提到，這是生命週期的一部分，所以讀者只要在這邊稍微理解就好，不需要太深入研究。

本文結尾

今天我們學到了「單向綁定」這個重要概念，簡單來說，就是資料會影響畫面，但畫面不會影響資料。你可以想像成「單行道」，只能一個方向前進。下一篇，我們就要來聊聊更厲害的「雙向綁定」。這個功能讓使用者在畫面上的操作，也能直接影響變數，資料跟畫面互相影響。