史上最強(qiáng)vue總結(jié)~萬字長文---面試開發(fā)全靠它了

vue框架篇
vue的優(yōu)點(diǎn)

輕量級(jí)框架：只關(guān)注視圖層，是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合，大小只有幾十kb；

簡單易學(xué)：國人開發(fā)，中文文檔，不存在語言障礙 ，易于理解和學(xué)習(xí)；

雙向數(shù)據(jù)綁定：保留了angular的特點(diǎn)，在數(shù)據(jù)操作方面更為簡單；

組件化：保留了react的優(yōu)點(diǎn)，實(shí)現(xiàn)了html的封裝和重用，在構(gòu)建單頁面應(yīng)用方面有著獨(dú)特的優(yōu)勢(shì)；

視圖，數(shù)據(jù)，結(jié)構(gòu)分離：使數(shù)據(jù)的更改更為簡單，不需要進(jìn)行邏輯代碼的修改，只需要操作數(shù)據(jù)就能完成相關(guān)操作；

虛擬DOM：dom操作是非常耗費(fèi)性能的，不再使用原生的dom操作節(jié)點(diǎn)，極大解放dom操作，但具體操作的還是dom不過是換了另一種方式；

運(yùn)行速度更快:相比較與react而言，同樣是操作虛擬dom，就性能而言，vue存在很大的優(yōu)勢(shì)。
請(qǐng)?jiān)敿?xì)說下你對(duì)vue生命周期的理解？

總共分為8個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。

    創(chuàng)建前/后： 在beforeCreate階段，vue實(shí)例的掛載元素el和數(shù)據(jù)對(duì)象data都為undefined，還未初始化。在created階段，vue實(shí)例的數(shù)據(jù)對(duì)象data有了，el為undefined，還未初始化。

    載入前/后：在beforeMount階段，vue實(shí)例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點(diǎn)，data.message還未替換。在mounted階段，vue實(shí)例掛載完成，data.message成功渲染。

    更新前/后：當(dāng)data變化時(shí)，會(huì)觸發(fā)beforeUpdate和updated方法

    銷毀前/后：在執(zhí)行destroy方法后，對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù)，說明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在

為什么vue中data必須是一個(gè)函數(shù)？

對(duì)象為引用類型，當(dāng)復(fù)用組件時(shí)，由于數(shù)據(jù)對(duì)象都指向同一個(gè)data對(duì)象，當(dāng)在一個(gè)組件中修改data時(shí)，其他重用的組件中的data會(huì)同時(shí)被修改；而使用返回對(duì)象的函數(shù)，由于每次返回的都是一個(gè)新對(duì)象（Object的實(shí)例），引用地址不同，則不會(huì)出現(xiàn)這個(gè)問題。
vue中v-if和v-show有什么區(qū)別？

v-if和v-show看起來似乎差不多，當(dāng)條件不成立時(shí)，其所對(duì)應(yīng)的標(biāo)簽元素都不可見，但是這兩個(gè)選項(xiàng)是有區(qū)別的:

1、v-if在條件切換時(shí)，會(huì)對(duì)標(biāo)簽進(jìn)行適當(dāng)?shù)膭?chuàng)建和銷毀，而v-show則僅在初始化時(shí)加載一次，因此v-if的開銷相對(duì)來說會(huì)比v-show大。

2、v-if是惰性的，只有當(dāng)條件為真時(shí)才會(huì)真正渲染標(biāo)簽；如果初始條件不為真，則v-if不會(huì)去渲染標(biāo)簽。v-show則無論初始條件是否成立，都會(huì)渲染標(biāo)簽，它僅僅做的只是簡單的CSS切換。
computed和watch的區(qū)別
計(jì)算屬性computed：

    支持緩存，只有依賴數(shù)據(jù)發(fā)生改變，才會(huì)重新進(jìn)行計(jì)算
    不支持異步，當(dāng)computed內(nèi)有異步操作時(shí)無效，無法監(jiān)聽數(shù)據(jù)的變化
    computed 屬性值會(huì)默認(rèn)走緩存，計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，也就是基于data中聲明過或者父組件傳遞的props中的數(shù)據(jù)通過計(jì)算得到的值
    如果一個(gè)屬性是由其他屬性計(jì)算而來的，這個(gè)屬性依賴其他屬性，是一個(gè)多對(duì)一或者一對(duì)一，一般用computed
    如果computed屬性屬性值是函數(shù)，那么默認(rèn)會(huì)走get方法；函數(shù)的返回值就是屬性的屬性值；在computed中的，屬性都有一個(gè)get和一個(gè)set方法，當(dāng)數(shù)據(jù)變化時(shí)，調(diào)用set方法。

偵聽屬性watch：

    不支持緩存，數(shù)據(jù)變，直接會(huì)觸發(fā)相應(yīng)的操作；
    watch支持異步；
    監(jiān)聽的函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是最新的值；第二個(gè)參數(shù)是輸入之前的值；
    當(dāng)一個(gè)屬性發(fā)生變化時(shí)，需要執(zhí)行對(duì)應(yīng)的操作；一對(duì)多；
    監(jiān)聽數(shù)據(jù)必須是data中聲明過或者父組件傳遞過來的props中的數(shù)據(jù)，當(dāng)數(shù)據(jù)變化時(shí)，觸發(fā)其他操作，函數(shù)有兩個(gè)參數(shù)：

    immediate：組件加載立即觸發(fā)回調(diào)函數(shù)執(zhí)行

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里聲明了firstName這個(gè)方法之后立即執(zhí)行handler方法
    immediate: true
  }
}

 

    deep: deep的意思就是深入觀察，監(jiān)聽器會(huì)一層層的往下遍歷，給對(duì)象的所有屬性都加上這個(gè)監(jiān)聽器，但是這樣性能開銷就會(huì)非常大了，任何修改obj里面任何一個(gè)屬性都會(huì)觸發(fā)這個(gè)監(jiān)聽器里的 handler

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

 

優(yōu)化：我們可以使用字符串的形式監(jiān)聽

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

 

這樣Vue.js才會(huì)一層一層解析下去，直到遇到屬性a，然后才給a設(shè)置監(jiān)聽函數(shù)。
vue-loader是什么？使用它的用途有哪些？

vue文件的一個(gè)加載器，跟template/js/style轉(zhuǎn)換成js模塊。
$nextTick是什么？

vue實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化后dom立即變化，而是按照一定的策略來進(jìn)行dom更新。

    nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用nextTick，則可以在回調(diào)中獲取更新后的 DOM

v-for key的作用

當(dāng)Vue用 v-for 正在更新已渲染過的元素列表是，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue將不是移動(dòng)DOM元素來匹配數(shù)據(jù)項(xiàng)的改變，而是簡單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。

為了給Vue一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性。key屬性的類型只能為 string或者number類型。

key 的特殊屬性主要用在Vue的虛擬DOM算法，在新舊nodes對(duì)比時(shí)辨識(shí)VNodes。如果不使用 key，Vue會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法。使用key，它會(huì)基于key的變化重新排列元素順序，并且會(huì)移除 key 不存在的元素。
Vue的雙向數(shù)據(jù)綁定原理是什么？

vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。主要分為以下幾個(gè)步驟：

    1、需要observe的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)象的屬性，都加上setter和getter這樣的話，給這個(gè)對(duì)象的某個(gè)值賦值，就會(huì)觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化

    2、compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)，收到通知，更新視圖

    3、Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
    ①在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己
    ②自身必須有一個(gè)update()方法
    ③待屬性變動(dòng)dep.notice()通知時(shí)，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。

    4、MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果。

組件傳值
父?jìng)髯?/p>

通過props傳遞

 父組件： <child value = '傳遞的數(shù)據(jù)' />

 子組件: props['value'],接收數(shù)據(jù),接受之后使用和data中定義數(shù)據(jù)使用方式一樣

 

子傳父

在父組件中給子組件綁定一個(gè)自定義的事件，子組件通過$emit()觸發(fā)該事件并傳值。

 父組件： <child @receive = 'receive' />

 子組件: this.$emit('receive','傳遞的數(shù)據(jù)')

 

兄弟組件傳值

    通過中央通信 let bus = new Vue()

    A：methods :{ 函數(shù){bus.$emit(‘自定義事件名’，數(shù)據(jù))} 發(fā)送

    B：created （）{bus.$on(‘A發(fā)送過來的自定義事件名’，函數(shù))} 進(jìn)行數(shù)據(jù)接收

    通過vuex

prop 驗(yàn)證，和默認(rèn)值

我們?cè)诟附M件給子組件傳值的時(shí)候，可以指定該props的默認(rèn)值及類型，當(dāng)傳遞數(shù)據(jù)類型不正確的時(shí)候，vue會(huì)發(fā)出警告

props: {
    visible: {
        default: true,
        type: Boolean,
        required: true
    },
},

 

請(qǐng)說下封裝 vue 組件的過程

首先，組件可以提升整個(gè)項(xiàng)目的開發(fā)效率。能夠把頁面抽象成多個(gè)相對(duì)獨(dú)立的模塊，解決了我們傳統(tǒng)項(xiàng)目開發(fā)：效率低、難維護(hù)、復(fù)用性等問題。

然后，使用Vue.extend方法創(chuàng)建一個(gè)組件，然后使用Vue.component方法注冊(cè)組件。子組件需要數(shù)據(jù)，可以在props中接受定義。而子組件修改好數(shù)據(jù)后，想把數(shù)據(jù)傳遞給父組件。可以采用emit方法。
Vue.js的template編譯

簡而言之，就是先轉(zhuǎn)化成AST樹，再得到的render函數(shù)返回VNode（Vue的虛擬DOM節(jié)點(diǎn)），詳細(xì)步驟如下：

    首先，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式），compile是createCompiler的返回值，createCompiler是用以創(chuàng)建編譯器的。另外compile還負(fù)責(zé)合并option。

    然后，AST會(huì)經(jīng)過generate（將AST語法樹轉(zhuǎn)化成render funtion字符串的過程）得到render函數(shù)，render的返回值是VNode，VNode是Vue的虛擬DOM節(jié)點(diǎn)，里面有（標(biāo)簽名、子節(jié)點(diǎn)、文本等等）

scss是什么？在vue.cli中的安裝使用步驟是？有哪幾大特性？

css的預(yù)編譯,使用步驟如下：

第一步：用npm 下三個(gè)loader（sass-loader、css-loader、node-sass）

第二步：在build目錄找到webpack.base.config.js，在那個(gè)extends屬性中加一個(gè)拓展.scss

第三步：還是在同一個(gè)文件，配置一個(gè)module屬性

第四步：然后在組件的style標(biāo)簽加上lang屬性 ，例如：lang=”scss”

特性主要有:

    可以用變量，例如（$變量名稱=值）
    可以用混合器，例如（）
    可以嵌套

vue如何監(jiān)聽對(duì)象或者數(shù)組某個(gè)屬性的變化

當(dāng)在項(xiàng)目中直接設(shè)置數(shù)組的某一項(xiàng)的值，或者直接設(shè)置對(duì)象的某個(gè)屬性值，這個(gè)時(shí)候，你會(huì)發(fā)現(xiàn)頁面并沒有更新。這是因?yàn)镺bject.defineprototype()限制，監(jiān)聽不到變化。

解決方式：

    this.$set(你要改變的數(shù)組/對(duì)象，你要改變的位置/key，你要改成什么value)

this.$set(this.arr, 0, "OBKoro1"); // 改變數(shù)組
this.$set(this.obj, "c", "OBKoro1"); // 改變對(duì)象

 

    數(shù)組原生方法觸發(fā)視圖更新,vue可以監(jiān)聽到數(shù)組原生方法導(dǎo)致的數(shù)據(jù)數(shù)據(jù)變化

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

 

意思是使用這些方法不用我們?cè)龠M(jìn)行額外的操作，視圖自動(dòng)進(jìn)行更新。 推薦使用splice方法會(huì)比較好自定義,因?yàn)閟plice可以在數(shù)組的任何位置進(jìn)行刪除/添加操作
常用的事件修飾符

    .stop:阻止冒泡
    .prevent:阻止默認(rèn)行為
    .self:僅綁定元素自身觸發(fā)
    .once: 2.1.4 新增,只觸發(fā)一次
    passive: 2.3.0 新增,滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā),不能和.prevent 一起使用
    .sync 修飾符

從 2.3.0 起vue重新引入了.sync修飾符，但是這次它只是作為一個(gè)編譯時(shí)的語法糖存在。它會(huì)被擴(kuò)展為一個(gè)自動(dòng)更新父組件屬性的 v-on 監(jiān)聽器。示例代碼如下：

<comp :foo.sync="bar"></comp>

 

會(huì)被擴(kuò)展為：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

 

當(dāng)子組件需要更新 foo 的值時(shí)，它需要顯式地觸發(fā)一個(gè)更新事件：

this.$emit('update:foo', newValue)

 

vue如何獲取dom

先給標(biāo)簽設(shè)置一個(gè)ref值，再通過this.$refs.domName獲取，例如：

<div ref="test"></div>

const dom = this.$refs.test

 

v-on可以監(jiān)聽多個(gè)方法嗎？

是可以的，來個(gè)例子：

<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">

 

assets和static的區(qū)別






這兩個(gè)都是用來存放項(xiàng)目中所使用的靜態(tài)資源文件。

兩者的區(qū)別：

assets中的文件在運(yùn)行npm run build的時(shí)候會(huì)打包，簡單來說就是會(huì)被壓縮體積，代碼格式化之類的。打包之后也會(huì)放到static中。

static中的文件則不會(huì)被打包。

    建議：將圖片等未處理的文件放在assets中，打包減少體積。而對(duì)于第三方引入的一些資源文件如iconfont.css等可以放在static中，因?yàn)檫@些文件已經(jīng)經(jīng)過處理了。

slot插槽

很多時(shí)候，我們封裝了一個(gè)子組件之后，在父組件使用的時(shí)候，想添加一些dom元素，這個(gè)時(shí)候就可以使用slot插槽了，但是這些dom是否顯示以及在哪里顯示，則是看子組件中slot組件的位置了。
vue初始化頁面閃動(dòng)問題

使用vue開發(fā)時(shí)，在vue初始化之前，由于div是不歸vue管的，所以我們寫的代碼在還沒有解析的情況下會(huì)容易出現(xiàn)花屏現(xiàn)象，看到類似于{{message}}的字樣，雖然一般情況下這個(gè)時(shí)間很短暫，但是我們還是有必要讓解決這個(gè)問題的。

首先：在css里加上以下代碼

[v-cloak] {
    display: none;
}

 

如果沒有徹底解決問題，則在根元素加上style=“display: none;” :style="{display: ‘block’}"
vue插件篇
狀態(tài)管理（vuex）
vuex是什么

Vuex 是一個(gè)專為 Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能。
怎么使用vuex

第一步安裝

npm install vuex -S

 

第二步創(chuàng)建store

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//不是在生產(chǎn)環(huán)境debug為true
const debug = process.env.NODE_ENV !== 'production';
//創(chuàng)建Vuex實(shí)例對(duì)象
const store = new Vuex.Store({
    strict:debug,//在不是生產(chǎn)環(huán)境下都開啟嚴(yán)格模式
    state:{
    },
    getters:{
    },
    mutations:{
    },
    actions:{
    }
})
export default store;

 

第三步注入vuex

mport Vue from 'vue';
import App from './App.vue';
import store from './store';
const vm = new Vue({
    store:store,
    render: h => h(App)
}).$mount('#app')

 

vuex中有幾個(gè)核心屬性，分別是什么？

一共有5個(gè)核心屬性，分別是:

    state 唯一數(shù)據(jù)源,Vue 實(shí)例中的 data 遵循相同的規(guī)則
    getters 可以認(rèn)為是 store 的計(jì)算屬性,就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。Getter 會(huì)暴露為 store.getters 對(duì)象，你可以以屬性的形式訪問這些值.

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

 

    mutation 更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation,非常類似于事件,通過store.commit 方法觸發(fā)

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變更狀態(tài)
      state.count++
    }
  }
})

store.commit('increment')

 

    action Action 類似于 mutation，不同在于Action 提交的是 mutation，而不是直接變更狀態(tài)，Action 可以包含任意異步操作

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

 

    module 由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

 

ajax請(qǐng)求代碼應(yīng)該寫在組件的methods中還是vuex的actions中

如果請(qǐng)求來的數(shù)據(jù)是不是要被其他組件公用，僅僅在請(qǐng)求的組件內(nèi)使用，就不需要放入vuex 的state里。

如果被其他地方復(fù)用，這個(gè)很大幾率上是需要的，如果需要，請(qǐng)將請(qǐng)求放入action里，方便復(fù)用。
從vuex中獲取的數(shù)據(jù)能直接更改嗎？

從vuex中取的數(shù)據(jù)，不能直接更改，需要淺拷貝對(duì)象之后更改，否則報(bào)錯(cuò)；
vuex中的數(shù)據(jù)在頁面刷新后數(shù)據(jù)消失

用sessionstorage 或者 localstorage 存儲(chǔ)數(shù)據(jù)

存儲(chǔ)： sessionStorage.setItem( '名', JSON.stringify(值) )
使用： sessionStorage.getItem('名') ---得到的值為字符串類型，用JSON.parse()去引號(hào)；

 

Vuex的嚴(yán)格模式是什么,有什么作用,怎么開啟？

在嚴(yán)格模式下，無論何時(shí)發(fā)生了狀態(tài)變更且不是由mutation函數(shù)引起的，將會(huì)拋出錯(cuò)誤。這能保證所有的狀態(tài)變更都能被調(diào)試工具跟蹤到。

在Vuex.Store 構(gòu)造器選項(xiàng)中開啟,如下

const store = new Vuex.Store({
    strict:true,
})

 

怎么在組件中批量使用Vuex的getter屬性

使用mapGetters輔助函數(shù), 利用對(duì)象展開運(yùn)算符將getter混入computed 對(duì)象中

import {mapGetters} from 'vuex'
export default{
    computed:{
        ...mapGetters(['total','discountTotal'])
    }
}

 

組件中重復(fù)使用mutation

使用mapMutations輔助函數(shù),在組件中這么使用

import { mapMutations } from 'vuex'
methods:{
    ...mapMutations({
        setNumber:'SET_NUMBER',
    })
}

 

然后調(diào)用this.setNumber(10)相當(dāng)調(diào)用this.$store.commit(‘SET_NUMBER’,10)
mutation和action有什么區(qū)別

    action 提交的是 mutation，而不是直接變更狀態(tài)。mutation可以直接變更狀態(tài)
    action 可以包含任意異步操作。mutation只能是同步操作
    提交方式不同

action 是用this.store.dispatch('ACTION_NAME',data)來提交。
mutation是用this.$store.commit('SET_NUMBER',10)來提交

 

    接收參數(shù)不同，mutation第一個(gè)參數(shù)是state，而action第一個(gè)參數(shù)是context，其包含了

{
    state,      // 等同于 `store.state`，若在模塊中則為局部狀態(tài)
    rootState,  // 等同于 `store.state`，只存在于模塊中
    commit,     // 等同于 `store.commit`
    dispatch,   // 等同于 `store.dispatch`
    getters,    // 等同于 `store.getters`
    rootGetters // 等同于 `store.getters`，只存在于模塊中
}

 

在v-model上怎么用Vuex中state的值？

需要通過computed計(jì)算屬性來轉(zhuǎn)換。

<input v-model="message">
// ...
computed: {
    message: {
        get () {
            return this.$store.state.message
        },
        set (value) {
            this.$store.commit('updateMessage', value)
        }
    }
}

 

路由頁面管理（vue-router）
什么是vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。包含的功能有：

    嵌套的路由/視圖表
    模塊化的、基于組件的路由配置
    路由參數(shù)、查詢、通配符
    基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
    細(xì)粒度的導(dǎo)航控制
    帶有自動(dòng)激活的 CSS class 的鏈接
    HTML5 歷史模式或 hash 模式，在 IE9 中自動(dòng)降級(jí)
    自定義的滾動(dòng)條行為

怎么使用vue-router

第一步安裝

npm install vue-router -S

 

第二步在main.js中使用Vue Router組件













第三步配置路由

    定義 (路由) 組件

路由組件可以是直接定義，也可以是導(dǎo)入已經(jīng)定義好的組件。這里導(dǎo)入已經(jīng)定義好的組件。如下

   




定義路由（路由對(duì)象數(shù)組）

定義路由對(duì)象數(shù)組。對(duì)象的path是自定義的路徑（即使用這個(gè)路徑可以找到對(duì)應(yīng)的組件），component是指該路由對(duì)應(yīng)的組件。如下：

  





實(shí)例化Vue Router對(duì)象

調(diào)用Vue Router的構(gòu)造方法創(chuàng)建一個(gè)Vue Router的實(shí)例對(duì)象，將上一步定義的路由對(duì)象數(shù)組作為參數(shù)對(duì)象的值傳入。如下

   



掛載根實(shí)例








第四步在App.vue中使用路由

在App.vue中使用標(biāo)簽來顯示路由對(duì)應(yīng)的組件，使用標(biāo)簽指定當(dāng)點(diǎn)擊時(shí)顯示的對(duì)應(yīng)的組件，to屬性就是指定組件對(duì)應(yīng)的路由。如下：














怎么定義vue-router的動(dòng)態(tài)路由？怎么獲取傳過來的動(dòng)態(tài)參數(shù)？

在router目錄下的index.js文件中，對(duì)path屬性加上/:id。使用router對(duì)象的params.id獲取動(dòng)態(tài)參數(shù)
vue-router的導(dǎo)航鉤子

常用的是router.beforeEach(to,from,next)，在跳轉(zhuǎn)前進(jìn)行權(quán)限判斷。一共有三種：

    全局導(dǎo)航鉤子：router.beforeEach(to,from,next)
    組件內(nèi)的鉤子
    單獨(dú)路由獨(dú)享組件

vue路由傳參

    使用query方法傳入的參數(shù)使用this.$route.query接受

    使用params方式傳入的參數(shù)使用this.$route.params接受

router和route的區(qū)別

    route為當(dāng)前router跳轉(zhuǎn)對(duì)象里面可以獲取name、path、query、params等

    router為VueRouter實(shí)例，想要導(dǎo)航到不同URL，則使用router.push方法

路由 TypeError: Cannot read property ‘matched’ of undefined 的錯(cuò)誤問題

找到入口文件main.js里的new Vue()，必須使用router名，不能把router改成Router或者其他的別名

// 引入路由
import router from './routers/router.js'

new Vue({
    el: '#app',
    router,    // 這個(gè)名字必須使用router
    render: h => h(App)
});

 

路由按需加載

隨著項(xiàng)目功能模塊的增加，引入的文件數(shù)量劇增。如果不做任何處理，那么首屏加載會(huì)相當(dāng)?shù)木徛?，這個(gè)時(shí)候，路由按需加載就閃亮登場(chǎng)了。

webpack< 2.4 時(shí)
{
    path:'/',
    name:'home',
    components:resolve=>require(['@/components/home'],resolve)
}
webpack> 2.4 時(shí)
{
    path:'/',
    name:'home',
    components:()=>import('@/components/home')
}

 

import()方法是由es6提出的，動(dòng)態(tài)加載返回一個(gè)Promise對(duì)象，then方法的參數(shù)是加載到的模塊。類似于Node.js的require方法，主要import()方法是異步加載的。
Vue里面router-link在電腦上有用，在安卓上沒反應(yīng)怎么解決

Vue路由在Android機(jī)上有問題，babel問題，安裝babel polypill插件解決
Vue2中注冊(cè)在router-link上事件無效解決方法

使用@click.native。原因：router-link會(huì)阻止click事件，.native指直接監(jiān)聽一個(gè)原生事件
RouterLink在IE和Firefox中不起作用（路由不跳轉(zhuǎn)）的問題

    只用a標(biāo)簽，不使用button標(biāo)簽
    使用button標(biāo)簽和Router.navigate方法

網(wǎng)絡(luò)請(qǐng)求(axios)

這個(gè)模塊請(qǐng)看我的另一篇文章，此處不再整理（我太懶了）

學(xué)會(huì)了axios封裝，世界都是你的
視頻播放(video.js)

這個(gè)模塊請(qǐng)看我的另一篇文章，此處不再整理（我太懶了）

手把手從零開始—封裝一個(gè)vue視頻播放器組件
vue常用ui庫
移動(dòng)端

    mint-ui （http://mint-ui.github.io/#!/zh-cn）
    Vant（https://youzan.github.io/vant/#/zh-CN/home）
    VUX (https://vux.li/)

pc端

    element-ui（https://element.eleme.cn/2.13/#/zh-CN/component/installation）
    Ant Design of Vue（https://www.antdv.com/docs/vue/introduce-cn/）
    Avue (https://avuejs.com/)

常用webpack配置
vue-lic3腳手架（vue.config.js）
publicPath

類型：String

默認(rèn)：’/’

部署應(yīng)用包時(shí)的基本 URL。默認(rèn)情況下，Vue CLI會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上，例如https://www.my-app.com/。如果應(yīng)用被部署在一個(gè)子路徑上，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑。例如，如果你的應(yīng)用被部署在https://www.my-app.com/my-app/，則設(shè)置publicPath為/my-app/

這個(gè)值也可以被設(shè)置為空字符串 (’’) 或是相對(duì)路徑 (’./’)，這樣所有的資源都會(huì)被鏈接為相對(duì)路徑，這樣打出來的包可以被部署在任意路徑，也可以用在類似 Cordova hybrid 應(yīng)用的文件系統(tǒng)中。
productionSourceMap

類型：boolean

moren：true

不允許打包時(shí)生成項(xiàng)目來源映射文件，在生產(chǎn)環(huán)境下可以顯著的減少包的體積
productionSourceMap

類型：boolean

moren：true

不允許打包時(shí)生成項(xiàng)目來源映射文件，在生產(chǎn)環(huán)境下可以顯著的減少包的體積

    注 Source map的作用：針對(duì)打包后的代碼進(jìn)行的處理，就是一個(gè)信息文件，里面儲(chǔ)存著位置信息。也就是說，轉(zhuǎn)換后的代碼的每一個(gè)位置，所對(duì)應(yīng)的轉(zhuǎn)換前的位置。有了它，出錯(cuò)的時(shí)候，除錯(cuò)工具將直接顯示原始代碼，而不是轉(zhuǎn)換后的代碼。這無疑給開發(fā)者帶來了很大方便

assetsDir

放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄,默認(rèn)是’’,
indexPath

指定生成的 index.html 的輸出路徑(相對(duì)于outputDir)。也可以是一個(gè)絕對(duì)路徑。默認(rèn)是’index.html’
lintOnSave

是否在每次保存時(shí)使用eslint檢查，這個(gè)對(duì)語法的要求比較嚴(yán)格，對(duì)自己有要求的同學(xué)可以使用
css

css: {
    //是否啟用css分離插件，默認(rèn)是true，如果不啟用css樣式分離插件，打包出來的css是通過內(nèi)聯(lián)樣式的方式注入至dom中的，
    extract: true,
    sourceMap: false,//效果同上
    modules: false,// 為所有的 CSS 及其預(yù)處理文件開啟 CSS Modules。
    // 這個(gè)選項(xiàng)不會(huì)影響 `*.vue` 文件。
  },

 

devServer

本地開發(fā)服務(wù)器配置，此處直接貼上我常用的配置，以注釋的方式介紹


devServer: {
    //配置開發(fā)服務(wù)器
    host: "0.0.0.0",
    //是否啟用熱加載，就是每次更新代碼，是否需要重新刷新瀏覽器才能看到新代碼效果
    hot: true,
    //服務(wù)啟動(dòng)端口
    port: "8080",
    //是否自動(dòng)打開瀏覽器默認(rèn)為false
    open: false,
    //配置http代理
    proxy: {
      "/api": { //如果ajax請(qǐng)求的地址是http://192.168.0.118:9999/api1那么你就可以在jajx中使用/api/api1路徑,其請(qǐng)求路徑會(huì)解析
        // http://192.168.0.118:9999/api1，當(dāng)然你在瀏覽器上開到的還是http://localhost:8080/api/api1;
        target: "http://192.168.0.118:9999",
        //是否允許跨域，這里是在開發(fā)環(huán)境會(huì)起作用，但在生產(chǎn)環(huán)境下，還是由后臺(tái)去處理，所以不必太在意
        changeOrigin: true,
        pathRewrite: {
            //把多余的路徑置為''
          "api": ""
        }
      },
      "/api2": {//可以配置多個(gè)代理，匹配上那個(gè)就使用哪種解析方式
        target: "http://api2",
        // ...
      }
    }
},

 

pluginOptions

這是一個(gè)不進(jìn)行任何 schema 驗(yàn)證的對(duì)象，因此它可以用來傳遞任何第三方插件選項(xiàng)，例如：

{
    //定義一個(gè)全局的less文件，把公共樣式變量放入其中，這樣每次使用的時(shí)候就不用重新引用了
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        './src/assets/public.less'
      ]
    }
}

 

chainWebpack

是一個(gè)函數(shù)，會(huì)接收一個(gè)基于 webpack-chain 的 ChainableConfig 實(shí)例。允許對(duì)內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改。例如：

chainWebpack(config) {
//添加一個(gè)路徑別名 假設(shè)有在assets/img/menu/目錄下有十張圖片，如果全路徑require("/assets/img/menu/img1.png")
//去引入在不同的層級(jí)下實(shí)在是太不方便了，這時(shí)候向下方一樣定義一個(gè)路勁別名就很實(shí)用了
    config.resolve.alias
      //添加多個(gè)別名支持鏈?zhǔn)秸{(diào)用
      .set("assets", path.join(__dirname, "/src/assets"))
      .set("img", path.join(__dirname, "/src/assets/img/menu"))
      //引入圖片時(shí)只需require("img/img1.png");即可
}
 


歡迎關(guān)注微信公眾號(hào):猴哥說前端