今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖
是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖
在加上 setup 語法糖的 script 標籤內做的事相當於在 be

學習

職場產業

音樂藝文

<div class="draft-block draft--p left">今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1498px" class="image-block-prerender" data-src="https://images.vocus.cc/5b0f56f5-9510-4e5a-90bd-2ab1092a3155.png" data-width="1498" data-height="2244" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1005px" class="image-block-prerender" data-src="https://images.vocus.cc/d2222023-952e-47f4-a5fc-6dc85c333a1f.png" data-width="1005" data-height="261" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">在加上 setup 語法糖的 script 標籤內做的事相當於在 <span style="font-weight: bold; ">beforeCreate</span> 和 <span style="font-weight: bold; ">created</span> 階段完成</div>
<div class="draft-block draft--p left">而想要設定什麼事情要在其他階段做，要像下面這樣，以下以設定 <span style="font-weight: bold; ">mounted</span> 階段舉例，先 import<span style="font-weight: bold; "> </span><span style="font-weight: bold; ">onMounted</span> 進來，然後把要做的事情寫在 <span style="font-weight: bold; ">onMounted</span> function 裡</div>
<div class="embed-block-prerender" data-type="gist" data-id="ddedaaafa2a2230e17a4c6c588377786"></div>
<div class="draft-block draft--p left">如果考慮到路由又會加上 <span style="font-weight: bold; ">beforeRouteEnter</span>, <span style="font-weight: bold; ">befoRerouteLeave</span>，就是可以設定進入這個頁面之前和離開這個頁面之前做什麼事</div>
<div class="draft--imgNormal draft-block"><div><div style="height:783px" class="image-block-prerender" data-src="https://images.vocus.cc/2f7d7552-147c-46f9-a1c2-d7fd35e12358.png" data-width="783" data-height="297" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">來舉個例子，我常常會設定在進入這個頁面之前先更改 web title</div>
<div class="embed-block-prerender" data-type="gist" data-id="ff2239e5e597faa029f0d98cfbb61669"></div>
<div class="draft-block draft--p left"></div>

Basic config
最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣
path 是設定路由，name 如果你沒有要用路由傳參，不寫也沒關係，component 是對應到哪個你寫的 vue 頁面
router-link
跟 <a></a> 很像，用法是像

[8] Vue Router

今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖

是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖

在加上 setup 語法糖的 script 標籤內做的事相當於在 beforeCreate 和 created 階段完成

而想要設定什麼事情要在其他階段做，要像下面這樣，以下以設定 mounted 階段舉例，先 import onMounted 進來，然後把要做的事情寫在 onMounted function 裡

如果考慮到路由又會加上 beforeRouteEnter, befoRerouteLeave，就是可以設定進入這個頁面之前和離開這個頁面之前做什麼事

來舉個例子，我常常會設定在進入這個頁面之前先更改 web title

v-bind
v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數，舉個例子
可以改寫成這樣
最後效果是一樣的，在標籤內 v-bind 可以簡寫成 :
v-model
上一篇已經提到了，就是可以透過網頁上的操作去改變資料的值，比方說表單、輸入欄等等。
v-for
迴圈，

付費限定文章
[7] Vue: Life cycle

以行動支持創作者！付費即可解鎖

付費限定文章[7] Vue: Life cycle

以行動支持創作者！付費即可解鎖

付費限定文章
[7] Vue: Life cycle