一個前端外行眼中的 vue.js

Ljzn發表於2023-03-06
前端Vue.js

vue.js 是一款十分流行的前端框架，因為簡單實用，容易上手，獲得了很多開發者的喜愛。本文將簡單介紹一下 vue.js 的主要特點，並分析它對於普通開發者意味著什麼。

Declarative Rendering （宣告式渲染）

所謂宣告式，個人理解是所見即所得，透過擴充套件 HTML 的功能，在最接近於目標 HTML 的情況下實現各種功能。這種渲染方式最常見於服務端渲染，例如 PHP 的web框架中，就常用 HTML 模版來實現資料的更新。這種方式的優點是簡單明瞭，寫好頁面基礎的 HTML 之後，只需要在需要資料更新的地方稍作修改就可以了。

例如，這樣的 vue 程式碼：

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

如果讓一個完全不瞭解 vue 的人來看，這似乎就是合法的 HTML 檔案。button 元素有了一個新的屬性 @click，雖然不知道是什麼意思，但看起沒有錯誤。

這種方式在熟悉服務端渲染的開發者看來，是很熟悉的，不會有太大的學習成本。

Reactivity （響應式）

相應式是指 vue 能自動跟蹤 Javascirpt 中的狀態變化，並更新頁面上的內容。這個過程包括幾個步驟：1.發生變化；2.檢測到變化；3.更新變化。vue 幫助我們把第二步和第三步自動完成了。

例如，這樣的 vue 程式碼：

import { ref } from 'vue'
const count = ref(0)

開發者只需要宣告的一個 count, 並將其初始值設為 0。之後當這個 count 值變化的時候，頁面上所有對這個值有依賴的地方都會被相應更新。

回想一下之前的文章 我所瞭解的 JavsScript裡描述的 reference 賦值，我們可以建立一種思維模型：

鴿籠模型：每個鴿籠有其獨特的編號，使用這個編號來確定每個鴿籠的位置。

vue 裡的 ref，可以想象為給鴿籠裝上了監控，鴿子的進出都可以第一時間感知到，而不是訪問時才知道。

Single-File Components （單檔案元件）

以往一個簡單的組建需要有多個檔案，包括 HTML 檔案，CSS 檔案，JS檔案等，在專案中使用的時候很不方便，而且容易造成混亂。vue 針對這一痛點，推出了SFC，單檔案元件的概念，開發者只需要使用一個檔案，就可以同時包含 HTML，CSS，JS的內容。

例如，這樣的 vue 程式碼：

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

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

將不同檔案中的內容都寫在了一起，大大提升了開發者的使用者體驗。無論是在開發時，還是在除錯修改的時候，都不再需要頻繁地切換檔案了。

總結

以上是 vue.js 最核心的幾個功能，只覆蓋了全部功能的很小一部分，如果你想更多地瞭解它，可以訪問它的官方網站，上面有很多詳細的例子和資料。對於沒有太多前端開發經驗的開發者，vue.js 上手容易，配置簡單，很快就可以搭建出簡單的頁面，也給了我一個啟示，就是提升開發體驗是沒有上限的。

然而，當專案逐漸變得複雜，用到的特性越來越多，可能就不像上面的例子這般簡單了，所以為了身心健康，我暫時還是願意選擇更加簡單的服務端渲染，而非前端JS框架。

相關文章