Vue

重要度:⭐⭐⭐⭐難度:⭐⭐⭐⭐

由於方便編輯性本文將改用 codesandbox 當作範例展示工具。

Vue.js 是一款流行的JavaScript前端框架，旨在更好地組織與簡化Web開發。Vue所關注的核心是MVC模式中的視圖層，同時，它也能方便地取得資料更新，並通過組件內部特定的方法實現視圖與模型的互動。 —維基百科

對於前端開發還有許多有趣開發模式，從經典的 MVC 框架，到完全獨立出來controller層的MVP，再到Vue.js、Angular、React引領的的 MVVM 框架。

請參考 Vue 06 MVVM 的概念。

MVVM 模式

Vue 與 jQuery 最大的不同在於後者是直接操作DOM，前者是透過改變資料來變動DOM。

安裝

你可以安裝或使用codesandbox 直接建立線上 Vue 開發環境。

Vue.jsvuejs

官方社群中文翻譯文檔

簡單的 Vue 實例

將範例中的代碼欄位拉開並點擊 ，你會看到以下目錄結構。

├─public 公開文件目錄

├─ favicon.ico // 網站 icon

├─ index.html 頁面入口文件

├─ src —原始碼目錄

├─ assets — 靜態資源目錄

├─ components — 組件資料夾

├─ App.vue — 專案入口元件

├─ main.js — 專案核心文件

├─ package.json —專案配置

注意此結構與 Vue-Cli* 建置的目錄結構不同，例如少了 node_modules 儲存依賴套件。

*Vue-Cli 是 Vue.js 官方提供的開發工具，可用於快速開發大型單頁應用程式 (SPA)，更具體來說像是前端在開發時，常會搭配一些前端管理工具 (Gulp、Webpack...) 來處理瑣碎又重複性的工作，但往往需要大量時間去自行配置開發環境，而 Vue-cli 就像開發懶人包，可透過指令快速地建立一個立即可用的 Vue 開發環境。

組件

我們可以透過組件封裝一些常用的功能，達到快速開發的效果。

在上方的範例中 HelloWorld.vue 便是個單文件組件，我們在 App.vue 將它引入。

<!-- App.vue -->
<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>

並鑲入於模板中。

<!-- App.vue -->
<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld msg="Hello Vue in CodeSandbox!" /> <!-- msg會傳入組件 -->
  </div>
</template>

傳入的資料需經由 props 聲明。

<!-- HelloWorld.vue -->
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

一個組件默認可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。 在上述模板中，你會發現我們能夠在組件實例中訪問這個值，就像訪問 data 中的值一樣。

生命週期

生命週期圖示

你可以在此處觀看中文版圖示。

beforeCreate

此時，組件的data和methods以及頁面DOM結構都還沒有初始化，所以這裡什麼都做不了

created

此時，組件的data和methods可用。 但頁面還沒被渲染出來，在該函數中，我們經常會發起ajax請求

beforeMount

此時，模板結構已經在內存中編譯完成，但還沒有真正渲染到頁面上。 頁面上看不到真實的數據，能看到的只是一個模板而已

mounted

組件創建階段的最後一個生命週期。 此時，頁面已經真正渲染好了，用戶可以看到真實頁面數據。

以上執行完，組件就離開了創建階段，進入運行階段。 如果用到了一些第三方UI插件，必須在mounted中來初始化插件。

運行中的生命週期函數，會根據data數據的變化有選擇性的觸發0次或n次

beforeUpdate

此時數據是最新的，但頁面上呈現的數據還是舊的

updated

頁面已經完成了更新，此時data數據是最新的，同時頁面上呈現的數據也是最新的。

beforeDestroy

執行該函數的時候，組件即將被銷毀但還沒有真正銷毀，此時組件（data、methods等數據或方法）還可以正常用。

destroyed

組件完成銷毀，組件廢了。

本文參考圖片來源:

重新認識 Vue.js | Kuro Hsubook.vue.tw

Vue.js 教程learning.dcloud.io

簡體中文

https://ithelp.ithome.com.tw/users/20109609/ironman/2233ithelp.ithome.com.tw

繁體中文

vue生命周期图示 - 浮华而已- - 博客园www.cnblogs.com