Vue.js
➤ 過去只有 Javascript、HTML、CSS 時有什麼問題？
➤ 框架的優勢
Vuex
➤ Vue過去傳值時面臨什麼問題？
➤ 如何解決這個問題？
Vuetify
➤ 提供前端工程師豐富的 MD component
➤ 強大的社群支持並穩定更新
➤ 自由決定導入 component
Nuxt.js
➤ Vue.js 的應用框架
➤ SSR 伺服器端渲染

Vue.js

一個優秀的 Javascript 框架

過去只有 Javascript、HTML、CSS 時有什麼問題？

• 難以維護：專案結構龐大時 Javascript、HTML、CSS 維護難度會成幾何式上升，各式各樣的邏輯都集中在 Javascript 裡面導致程式可讀性極低
• 效能低落：如果 Javascript 頻繁操作 DOM 元素時會不斷觸發 Reflow & Repaint 的流程，頁面重複渲染的過程會消耗大量效能

框架的優勢

• 資料與 UI 分離：過去 Javascript 要動態的去更新 DOM 來塞入資料，但框架透過資料雙向綁定，工程師可以專注處理資料的邏輯面
• 模組化的 UI：一個網站會有許多重複出現的元素(按鈕、表單、表格…)，在框架中可以這些常用的元素設計成 component，要使用時再根據實際需求填入資料及參數即可，大幅提升工程師理解與維護的能力。
• 更好的效能：採取 Virtual DOM 概念，當資料變動時先計算好要變動的地方，以此抵銷無意義的變更，並且重複使用已存在的 DOM 元素

Vuex

Vue過去傳值時面臨什麼問題？

過去 Vue 裡面 component 的參數傳遞都是採用 emit跟 props ，但如果 component 的關係並非 parent/child 而是像下圖想要將 Component B 的資訊傳到 Component C ，這種操作不但需要很多 emit跟 props 還會造成程式碼閱讀困難

如何解決這個問題？

根據上面的問題，官方推出專門用來『狀態管理』的工具，你可以把它想像成 Vue 裡面的全域變數，將狀態(state)全部放在倉庫(store)來進行管理。

更新 state：在 Vuex 裡面，儲存狀態的為 State，component 需要更動 State 時，需要透過 Actions 發出一個 Commit 去呼叫 Mutations，再由 Mutations 去更改 State。

取得 state：而 component 的資料更新可以在 compute 裡面使用 mapGetters 使用 getters 的 function 或是用 mapState 直接取用 state 的資料

Vuetify

提供前端工程師豐富的 MD component

你可以把 Vuetify 當成 Vue 的 Material Design framework，他不但省去了你自己手工打造 UI component 的時間，還為每個 component 提供許多可以自由定義的 property 讓版型更加靈活。

強大的社群支持並穩定更新

截至今天在 Github 上有高達 30K 的星星，如果你在開發上遇到問題在他們 discord社區上發問也能很快得到解答。

官方每個禮拜都會穩定更新版本，相比於其他 Vue 的 framework 是非常穩定的

自由決定導入 component

官方稱為 Auto treeshaking，在使用 Vuetify 時你可能覺得他非常『肥』，裡面包了一堆你專案中用不到 component，但因為有 Auto treeshaking 的機制所以只會導入你有使用的 component

Nuxt.js

Vue.js 的應用框架

把 webpack、vue loader、vuex、router 的設定都集中在一起，減少使用者的配置成本

SSR 伺服器端渲染

因為由 server 端組成 HTML 後回傳，所以 Google 在 SEO 解析時可以很好的分析 DOM 元素，藉此提升網站的 SEO 水平

Nuxt.js 也是能做 SPA(無SSR)、產生靜態網頁

參考資源： Vuex 是什麼? 怎麼用?、前端框架的功能與優點

SPA，single page application簡易說明

他會在一開始init web page時就把html, js, css這些需要的load完，因此在換頁時只需要load新頁面所需要的元件，基本上是用router-link的方式來完成換頁功能

優點：

• 使用者體驗良好，省去每次刷新頁面的等待，大幅減少loading相同元素的耗能
• 基於上一個原因，server的壓力也減少許多
• 前後端分離，前端專心處理渲染，後端專心處理數據

缺點：

• 第一次loading時間較長
• 因為是單頁瀏覽，所以不支援上一頁/下一頁功能
• SEO難度高，因為所有內容都在同一頁

v-if與v-show的區別

• v-if是根據條件是否成立來決定渲染/銷毀
• v-show是無條件渲染，他就是一個css的display的功能

如果你使用場景偶爾才切換條件就使用v-if，可以減少資源浪費；但如果需要高頻率切換就使用v-show吧

Vue parent component , child component特性

Parent component可以透過props傳遞到child component，而child component如果想要傳遞變更事件及資料就需要用$emit來觸發parent的事件

如果你想要在child 變更props，請這樣操作：

這個props傳入一個initial value，child component會希望可以操作這個init value，如果想要做這個操作，你需要在child component裡面新增data的屬性，並給予props的initial value

props: ['initialValue'],
data: function () {
    return {
        counter: this.initialValue
    }
}

這個props傳入一個origin value，child component想要對他做一個換算或是變更，這樣建議用computed

props: ['size'],
computed: {
    normalizedSize: function () {
        return this.size.trim().toLowerCase()
    }
}

Computed VS Watch

• Computed是用來計算的，有緩存的特性，只有裡面依賴的參數調整時才會觸發，且一定有計算完的回傳值
• Watch主要是觀察數據變更，比較常用來做一些消耗相對多resourcec或是非同步運算的事情(ex:call api)

給object array新的value，vue要如何偵測

因為javascript限制，下面兩個範例是vue無法偵測的，需要進行修正：

//vm.items[indexOfItem] = newValue
vm.$set(vm.items, indexOfItem, newValue)
//vm.items.length = newLength
vm.items.splice(newLength)

Vue的生命週期

Component初始化->屬性綁定&編譯templete->掛載dom->渲染更新…->銷毀

Parent component & Child component life cycle

基本原則就是父親開始動作後兒子才能動作，兒子動作完畢後，父親才會正式停下來

Component mounted

• 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

Child component update

• 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

Parent component update

• 父 beforeUpdate -> 父 updated

Destroyed

• 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

Vue的生命週期中可以做異步請求

created、beforeMounted、mounted都可以，因為data已經存在，可以去做相關的操作，但建議在created階段操作：

• 可更早取得server端數據，減少頁面loading時間
• ssr不支援beforeMounted、mounted，放在created可保持程式邏輯一致性(如果前後端分離通常是在client端做渲染較不會有這個問題)

什麼階段可以對DOM操作

在mounted階段可以對DOM操作，這個階段已經完成整個頁面的component了

Parent component如何監聽Child component的生命週期

1. 用$emit的方式

// Parent.vue
<Child @mounted=”doSomething”/>
// Child.vue
mounted() { this.$emit(“mounted”); }

2. 用@hook方式(較推薦)

// Parent.vue
<Child @hook:mounted=”doSomething” ></Child>
doSomething() {
console.log(‘父组件监听到 mounted 钩子函数 …’);
},
// Child.vue
mounted(){
console.log(‘子组件触发 mounted 钩子函数 …’);
},

Keep-alive的作用

keep-alive是 Vue 的原生元件，專門做為 Cache 的解決方案，避免頁面中的組件重新被渲染。詳細可參考

為什麼component中的data是一個函數，然後return一個object，而new Vue卻可以直接是一個object

因為component是要用來重複使用的，如果data是一個object這樣component之間會資料錯亂，而當他是一個函數的時候就可以完成區隔

而new Vue則不會重複使用，所以沒有被引用的問題

// data
data() {
    return {
        message: “子组件”,
        childName:this.name
    }
}
// new Vue
new Vue({
    el: ‘#app’,
    router,
    template: ‘<App/>’,
    components: {App}
})

v-model原理

v-model主要是在input, select, textarea這些元素中建立雙向綁定的工具，他會在不同元素中拋出不一樣的事件：

• text 和 textarea 元素使用 value 屬性和 input 事件；
• checkbox 和 radio 使用 checked 屬性和 change 事件；
• select 字段将 value 作為 prop 並將 change 作為事件。

Vue component間communicate 方式

• props / $emit 父子component通信
• ref 與 $parent / $children 父子component通信
• EventBus ($emit / $on) 你可以把它當成全域的事件，只要有監聽便可接收，但請在destory該component前也要把監聽事件destory掉
• EventBus 事件總線
• Vuex，你可以把他想像成一個網站暫存的store，你可以更改及存取state

Vuex 概念

核心為store，用來存取state；可使用mutation提交的方式來過改變state資料

SSR優缺點

優點：

• 好的SEO，因為網頁已經再server side組裝完成，所以搜尋引擎能直接抓到渲染好的頁面
• 首頁加載快速，因為都由server side轉換完成了

缺點：

• 更多的開發條件限制：像是life cycle渲染階段只能用beforeCreate、created
• server負擔更重：因為都是server side作轉換，所以負擔更重，cache的設計更加顯得重要

vue-router種類

hash, history, abstract(default)

MVVM是什麼

由Model-View-ViewModel組成

• Model: 由後端接口api return 回來的資料(ex: json data)

{ “url”: “/your/server/data/api”, “res”: { “success”: true, “name”: “IoveC”, “domain”: “www.cnblogs.com" } }

• View: 前端UI介面由HTML/CSS構建

<div id=”app”>
<p>{{message}}</p>
<button v-on:click=”showMessage()”>Click me</button>
</div>

• ViewModel: 前端開發人員根據api回傳的資料做二次封裝提供給View使用

var app = new Vue({
el: ‘#app’,
data: { // 用于描述视图状态
    message: ‘Hello Vue!’,
},
methods: { // 用于描述视图行为
    showMessage(){
        let vm = this;
        alert(vm.message);
    }
},
created(){
    let vm = this;
    // Ajax 获取 Model 层的数据
    ajax({
        url: ‘/your/server/data/api’,
        success(res){
            vm.message = res;
        }
    });
}})

Virtual DOM優缺點

優點：

• 保證基礎效能
• 無須手動去調整DOM，增加開發效率
• 跨平台，如果SSR，WEEX

缺點：

• 無法極致優化，畢竟這些都是自動產生的

Vue中Key的作用

key是Vue中node節點的唯一值，透過他diff操作可更快速準確

Vue可考慮優化項目

coding部分

• v-if/v-show使用情境區分
• computed/watch使用情境區分
• v-for記得要有key，避免使用v-if(這部分應該交由server端就完成data的filter)
• 監聽的事件在component destroy時是否有銷毀
• Image lazy loading
• 第三方插件依照需求引入

Webpack部分

• Webpack對圖片進行壓縮
• 共用component規劃
• 共用css設計

web部分

• gzip
• CND
• Browser cache

參考資源：https://juejin.im/post/5d59f2a451882549be53b170#comment