iT邦幫忙

2022 iThome 鐵人賽

DAY 1
0
Modern Web

每日任務 Vue 起來系列 第 1

每日任務 Vue 起來 Day 1. 前言

  • 分享至 

  • xImage
  •  

去年剛參加完一次鐵人賽,發現每次寫完文章都會有大腦瞬間清晰的感受,雖然過了這麼久好像又慢慢的腦袋豆腐化,但有鑑於當時那個效果非常的好,於是今年的我又再次決定來個 30 天,讓大腦做個瑜珈,整理一下我的 Vue 知識,可能很多觀念仍然不足或有待改進,也請大家多多包涵與指教了。m(_ _)m

這一次的 30 日文章題目,是參考我參加的培訓課程所提供的每日任務來撰寫,目的以對 Vue 的基礎及觀念做一次加強與整理,但也會從回顧 JavaScrpt 基礎開始,並且提到一點 boostrap 操作,但因為主要目的是 Vue,因此這兩項不會說的太多太細;目錄稍做歸類的話,大概會是這樣子:

  • JavaScript 基礎回顧(變數命名、物件取值、物件觀念、陣列、函式、型別…..等)
  • Bootstrap 基本操作
  • Vue 指令、方法練習與研究

前言就說到這裡,那麼我就開始這 30 天的旅程囉~

等等,大家是不是覺得我這篇寫完了?
沒有啦~回來回來,雖然只是篇前言,但我也是比較希望可以好好運用的XD

所以我就決定要把面試常見的 Vue 考題放一題在這裡(喂

什麼是 Vue?

網路上對於 Vue 的介紹已經很多了,因此這邊我就直接引用 MDN Web Docs 網站上對 Vue 的解釋。

Vue 是一個新穎的 Javascript 框架,它提供了很多有用的功能來達到漸進增強( progressive enhancement )的策略。與其他的框架不同的是,你可以把 Vue 和既有的 HTML 做整合,這讓你可以像使用插入性替換的函式庫一樣來使用 Vue ,就像使用 JQuery 一樣。

以我自己對 Vue 的理解,我會說 Vue 是一個提升網頁開發效率與優化使用者體驗的一個框架。

提升網頁開發效率:

  • 過往我們在開發網站的時候,因為沒有前後端分離,因此前端只負責樣式的呈現,而後端則必須負責所有資料的傳遞、前端的請求以及畫面的更新,如果是資料量較大的網站,就容易加重伺服器的負擔。
  • 假如用 Vue 來開發則能夠明確的前後端分離出來,後端只負責資料庫的操作與回傳,前端則只負責畫面的渲染,當畫面需要更新的時候,後端不需要重載整個 html 檔案,只要更新需更新的元件即可。

優化使用者體驗:

  • 傳統網站使用的是 SSR 架構,所有的資料都會由後端回傳,因此當我們需要更新一個部分,後端就必須將整個 html 重載更新,如果網站裡剛好有資料量較大的部分,這就很容易使網頁更新的速度變慢,當然網頁也會顯得整體比較慢。
  • 而 Vue 使用的是 SPA 架構,當我們更新網站內容時,其實只是做元件的切換,白話來說就是只更新我們需要更新的部分,不用牽一髮動全身,加上非同步的方法,使 Vue 建構的網站整體速度更快且有效率。

好了好了,說好只放一題,就不堅持繼續研究了,現在時間晚上 11:53 分,還沒洗澡的我就先寫到這裡準備休息了,感謝收看^^


下一篇
每日任務 Vue 起來 Day 2. JavaScript 回顧 (1)
系列文
每日任務 Vue 起來12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言