###### tags: `vue`, `front-end`, `javascript`
# 【自學筆記】從0開始學Vue - Day1 建構與生命週期

關於Vue，一直以來都多少有接觸，但都沒有好好的理解過它
就來做個一系列的學習筆記，紀錄學習Vue的過程吧
基本上就以到處拜讀前輩大神的文章，並整理成我理解的文字的方式進行

---

<font style="font-weight:bold;font-size:20px;line-height:50px">
Vue的特點
</font>

1. Vue只在乎==畫面與資料的變化==，我們不需手動操作、更新DOM元素。（雙向綁定）
2. 以==操作資料==為主的開發模式
3. 模板語法、元件化

<font style="font-weight:bold;font-size:20px;line-height:50px">
建立 Vue Instance(實體)
</font>

var vm = new Vue({
  //options
});

使用Vue建構式建立一個 vm (view model的簡稱)，`透過new Vue()`建立

**Vue實體的基本屬性**
>圖片來源：五倍紅寶石Vue實戰課程

<font style="font-weight:bold;font-size:20px;line-height:50px">
Vue的生命週期
</font>

Vue有個叫生命週期的東西，過程中會執行一連串的工作，從
`創建`、`初始化數據`、`Template編譯模板`、`DOM元素掛載`、`資料的渲染與更新`、`卸載`
以上統稱為Vue實例的生命週期，大體可以分為==四個階段==。
:::info
**第一階段：Creation 初始建置**
:::

Creation 階段是第一個Hook函式，與其他階段不同，它是在==伺服器端渲染期間==運行。
因此，若需要在客戶端渲染和伺服器渲染期間設置事件，就在此階段進行設定。
>圖片中紅框就是生命週期的函式，一般用Hook鉤子稱呼之

* `beforeCreate`：Vue實例初始化。
* `created`：Vue實例建立完成。資料data已可取得，但==el屬性尚未被建立==。

:::info
**第二階段：Mounting 資料掛載**
:::

接續`Creation`階段，先判斷有沒有el，若無就用mount掛載el
再判斷有沒有teamplate，有就用`render function`，沒就用`el teamplate`進行模板編譯
接著進到Mounting的階段(左側)

* `beforeMount`：執行元素掛載之前，代表$el尚未被建立。
* `mounted`：元素已掛載，$el被建立，是==最常使用==的生命週期hook。

:::info
**第三階段：Updating 資料改變，重新渲染畫面**
:::
當已掛載的元件資料屬性改變時，或是有其他原因需要==重新渲染頁面==，就可以用Updating刷新畫面

接著進到Updating的階段(右側)

* `beforeUpdate`：當資料改變被呼叫使用，還不會渲染View。
* `updated`：當資料更新完成，則驅動DOM元素重新渲染畫面View。

:::info
**第四階段：Destruction元件銷毀**
:::
`destroy`被呼叫時，會執行銷毀，將原始元件從DOM中移除


* `beforeDestroy`：Vue實例還可使用。
* `destroyed`：Vue實例銷毀，所有的DOM元素綁定被解除、移除偵聽事件、Vue child實例也被一併銷毀。

---

*參考資料: https://reurl.cc/lolZNv*

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*