Vue的基本常識

雖然用了一段時間的Vue，但自認對他的了解還不夠深刻，於是讀了一些大神文章，依照自己的理解做了整理筆記，希望大家都能吸收這些基本常識。

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

▶︎ 如果這篇文章有幫助到你
1. 可以點擊下方「Follow」來追蹤我～
2. 可以對文章拍手讓我知道 👏🏻
你們的追蹤與鼓勵是我繼續寫作的動力 🙏🏼
▶︎ 如果你對工程師的職涯感到迷茫
1. 也許我在iT邦幫忙發表的系列文可以給你不一樣的觀點 💡
2. 也歡迎您到書局選購支持，透過豐富的案例來重新檢視自己的職涯