課程目標
- 體驗一下 Reactivity 的效果與便利
課程內容
來學 Vue 之中 Reactivity 的基本觀念
- https://vuejs.org/guide/essentials/reactivity-fundamentals.html
老樣子，大部份看不懂沒關係，稍微有個印象就好
記得之前的課程，每次更新完 state，你都要接著去執行 render() 函式嗎？
所謂 Reactivity 就只是說：當你更新完 application state 之後，Vue 會自動幫你更新 UI 上的內容
就只是這樣，不要把它想得太複雜
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
嗨，我是 {{ user.name }}
<button @click="changeNewName">
改名字
</button>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
user: {
name: "John Doe"
}
}
},
mounted() {
this.user.name = "Frank"
},
methods: {
changeNewName() {
this.user.name = "Kevin"
}
}
}).mount('#app')
</script>
到 jsfiddle 跑跑看，看看畫面上出現什麼
mounted 是 vue 將畫面第一次載入之後，可以安排任務的地方，通常會放一些「系統初始化任務」
@click 跟 methods 那些，就只是操作事件的寫法而已，先照做就好
以上兩點，後面課程會詳談
在 Vue 文件中，你會到處看到 this 這個關鍵字
要存取 application state，有時前面要加 this. 有時又不用
關於 this 關鍵字，它是一個 JavaScript 程式語言裡面過時又晦澀難懂的觀念
我不想細談，你也先不用研究。就先照做、程式能跑就好了
反正改天你真的遇到問題，大概知道要往這方向研究就是了
接著來學 Vue 之中 Computed 屬性的觀念
- https://vuejs.org/guide/essentials/computed.html
老話一句，看不懂沒關係
雖然大家都說用這寫法，效能會比較好、程式碼會比較優雅
但實際上，我自己在好幾個專案，就完全不使用任何 computed 功能
一律通通只用 methods 來寫程式，根本也不會怎麼樣
在整門系列課程，會常常像這樣，我叫你讀官網文件的很多內容
但我接著又會說，看不懂沒差，其中 XXX 根本沒用，其中 YYY 也沒必要用，只學 ZZZ 就好
這些都是我個人的主觀意見。如果你在網路上找資料，會看到許多工程師，有跟我完全相反的建議
這是軟體工程師圈子的常態，充滿各種主觀喜好、偏見，你要習慣一下
（如果你很好奇我是怎麼做出這些判斷的，請重新閱讀此系列課程，第一篇文章：前言，裡面的最後一段）
你不需要完全同意我的觀點，在研究過程中，如果你有發現比較喜歡的寫法，就直接用沒關係
如同我多次提醒過：只要能解決問題就好，你就隨便寫沒關係
各種做法細微的差異，將來有一天你會慢慢理解
課後作業
承接上一課的作業
這一課來簡單體驗一下 reactivity 的效果就好
也就是簡單更新一下 application state 就好
請加入 mounted 函式，在裡面把「第一個記事」的內容更新為「多出門、到處走走、也要多運動」
完成之後，你會發現，你的春節行程安排，看起來積極多了～
做出以上功能，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
交作業 https://jsfiddle.net/superyngo/2ft05c8v/2/
看到「實際上，我自己在好幾個專案，就完全不使用任何 computed 功能 一律通通只用 methods 來寫程式，根本也不會怎麼樣」 就覺得太爽太讚了
站長真的很有概念 推推推 因為我也想這樣做XD
交作業，再麻煩站長了，謝謝! https://jsfiddle.net/ehs54bwu/
交作業 https://jsfiddle.net/birdie2019/54pzj7w2/55/