VUE知識點集錦

時間 2019-12-06

標籤 vue 知識集錦简体版

原文原文鏈接

vue基礎

一、 router 路由與 a 標籤的區別：https://www.jianshu.com/p/34b...
二、 VUE雙向綁定的原理：php

答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個方法從新定義了對象獲取屬性值(get)和設置屬性值(set)的操做來實現的。Vue的雙向數據綁定就是隻要在讀取值（getter）時收集觀察者，在賦值（setter）時觸發觀察者更新函數，就能夠實現數據變動，從而實現DOM從新渲染。

三、vue2.0中router-link詳解：https://blog.csdn.net/lhjueji...
四、 vue項目開發前的es6的知識儲備:https://www.cnblogs.com/untir...
五、箭頭函數和普通函數的區別：https://www.jianshu.com/p/73c...css

總結：
1>箭頭函數寫代碼擁有更加簡潔的語法；
2>箭頭函數的this永遠指向其上下文的 this，任何方法都改變不了其指向，如call(), bind(), apply(); 普通函數的this指向調用它的那個對象

六、Vue的生命週期，詳細介紹各個階段html

建立前/後
在beforeCreated階段，vue實例的掛載元素$el和數據對象data都爲undefined，還未初始化。
在created階段，vue實例的數據對象data有了，$el尚未。
載入前/後
在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data.message還未替換。
在mounted階段，vue實例掛載完成，data.message成功渲染。
更新前/後
當data變化時，會觸發beforeUpdate和updated方法。
銷燬前/後
在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，可是dom結構依然存在
它能夠總共分爲8個階段：建立前/後, 載入前/後,更新前/後,銷燬前/銷燬後.

七、簡單描述每一個週期具體適合哪些場景？前端

生命週期鉤子的一些使用方法：
beforecreate : 能夠在這加個loading事件，在加載實例時觸發
created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用
mounted : 掛載元素，獲取到DOM節點
updated : 若是對數據統一處理，在這裏寫上相應函數
beforeDestroy : 能夠作一個確認中止事件的確認框
nextTick : 更新數據後當即操做dom

八、 vue-router實現原理vue

根據url來path匹配相應的 component ，在把匹配到的component渲染到指定的dom上就行了
vue-router是vue的路由插件,組件：router-link router-view
說簡單點，vue-router的原理就是經過對URL地址變化的監聽，繼而對不一樣的組件進行渲染。每當URL地址改變時，就對相應的組件進行渲染。原理是很簡單，實現方式可能有點複雜，主要有hash模式和history模式。html5

九、Vuex各個狀態node

有 5 種，分別是 state、getter、mutation、action、module
state Vuex 使用單一狀態樹，既每一個應用將僅僅包含一個store實例，單單一狀態樹和模塊化並不衝突。存放的數據狀態，不能夠直接修改裏面的數據。
mutations mutations定義的方法動態修改Vuex的store中的狀態或數據。
getters 相似vue的計算屬性，主要用來過濾一些數據。
action action能夠理解爲經過mutations裏面處理數據的方法變成可異步的處理數據的方法，簡單的說就是異步操做數據。view層經過store.dispath來分配action。Action 相似於 mutation，不一樣在於：Action 提交的是 mutation，而不是直接變動狀態；Action 能夠包含任意異步操做。
modeules 項目特別複雜的時候，可讓每個模塊擁有本身的state,mutation,action,getters，使得結構很是清晰，方便管理jquery

十、axios是什麼？怎麼使用？描述使用它實現登陸功能的流程webpack

axios是請求後臺資源的模塊。 npm i axios -S
若是發送的是跨域請求，需在配置文件中 config/index.js 進行配置

十一、兄弟組件，父子傳值ios

父---子 父組件經過標籤傳值，子組件經過props接收
子---父 經過this.$emit將方法和數據傳遞給父組件，父組件經過$on接收
1.父組件與子組件傳值
父組件傳給子組件：子組件經過props方法接受數據；
子組件傳給父組件：$emit方法傳遞參數;
2.非父子組件間的數據傳遞，兄弟組件傳值
EventBus，就是建立一個事件中心，至關於中轉站，能夠用它來傳遞事件和接受事件，項目比較小時，用這個比較合適；
VueX，建立一個數據倉庫，整個項目全局均可以往這個倉庫存放數據和讀取數據
若是父組件想要調用子組件的方法
vue會給子組件添加一個ref屬性，經過this.$refs.ref的值即可以獲取到該子組件，而後即可以調用子組件中的任意方法

十二、vue怎麼實現頁面的權限控制

利用 vue-router 的 beforeEach 事件，能夠在跳轉頁面前判斷用戶的權限（利用 cookie 或 token），是否可以進入此頁面，若是不能則提示錯誤或重定向到其餘頁面，在後臺管理系統中這種場景常常能遇到。

1三、vue裏面的虛擬dom

簡單來講，虛擬DOM是用Object來表明一顆節點，這個Object叫作VNode，而後使用兩個VNode進行對比，根據對比後的結果修改真實DOM。
爲何是兩個VNode？由於每次渲染都會生成一個新的VNode，而後和上一次渲染時用的VNode進行對比。而後將這一次新生成的VNode緩存，用來進行下一次對比。

1四、vue中scoped的原理：https://www.jianshu.com/p/b92...

加了 scoped 的話，編譯的時候就把對應的選擇器和對應的元素綁定一個由全局惟一的字符串產生的屬性。vue經過在DOM結構以及css樣式上加上惟一的標記，保證惟一，達到樣式私有化，不污染全局的做用

1五、如何解決vue開發中父組件添加scoped後沒法修改子組件樣式問題

父組件：使用 深度做用選擇器

http://www.php.cn/js-tutorial...
https://www.cnblogs.com/ruish...

<style lang="css" scoped>

 header /deep/ .header{     

   box-shadow:0px 1px 0px 0px $white;

  }

</style>

子組件：

<template>  

 <header>    

    <p class="header">       

    </p>   

  </header>

</template>

1六、Vue國際化處理 vue-i18n 以及項目自動切換中英文
https://www.cnblogs.com/nxmin...
https://www.cnblogs.com/wangw...
1七、Vue實現組件信息的緩存
https://blog.csdn.net/u014628...
1八、Vue中data和computed的區別
https://segmentfault.com/a/11...

data 和 computed都是響應式的
data中的屬性並不會隨賦值變量的改動而改動;當須要這種隨賦值變量的改動而改動的時候，仍是用計算屬性computed合適
若是實在要在data裏面聲明屬性，能夠先賦一個值，而後在methods裏面定義方法操做該屬性，效果等同，也會有響應式

var vm = new Vue({

        el: "#app",
        data: {
            firstname: "",
            lastname: ""
        },
        methods: {
        },
        watch: {
        },
        computed:{
            // 在 computed 中，能夠定義一些 屬性，這些屬性，叫作 【計算屬性】， 計算屬性的，本質，就是 一個方法，只不過，咱們在使用 這些計算屬性的時候，是把 它們的 名稱，直接看成 屬性來使用的；並不會把 計算屬性，看成方法去調用；

            // 注意1： 計算屬性，在引用的時候，必定不要加 () 去調用，直接把它 看成 普通 屬性去使用就行了；
            // 注意2： 只要 計算屬性，這個 function 內部，所用到的 任何 data 中的數據發送了變化，就會 當即從新計算 這個 計算屬性的值
            // 注意3： 計算屬性的求值結果，會被緩存起來，方便下次直接使用； 若是 計算屬性方法中，因此來的任何數據，都沒有發生過變化，則，不會從新對 計算屬性求值；
            'fullname':function () {
                return this.firstname+this.lastname;
            }
        }
    })

1九、後臺管理系統登陸、權限：
https://juejin.im/post/591aa1...
https://www.cnblogs.com/heroz...
20、Axios封裝：https://blog.csdn.net/qq_3814...

一、首先，在vue-cli項目的src路徑下新建一個axios文件夾，在axios文件夾裏新建aps.js和request.js，api.js用於寫接口，對axios的封裝寫在request.js裏
二、而後開始統一封裝axios，首先引入axios、qs依賴，引入main.js主要是用於後面對接口進行統一處理，好比調接口的時候，顯示loading等。
三、而後建立一個axios實例，這個process.env.BASE_URL在config/dev.evn.js、prod.evn.js裏面進行配置
四、axios實例建立好以後，開始使用request攔截器對axios請求配置作統一處理，而後是對response作統一處理
五、最後，將咱們的axios實例暴露出去，整個axios的封裝就寫完了
六、axios封裝好以後，調用就很簡單了。咱們把接口統一寫在api.js文件裏。（固然，若是你的業務很是複雜的話，建議把不一樣業務的api分開放到不一樣的文件裏，這樣方便之後維護）。而後在具體的組件中進行調用。

2一、Vue.mixin() 能夠將自定義的方法混入全部的 Vue 實例中。：https://segmentfault.com/a/11...
2二、Vue keep-alive 實現後退緩存，前進刷新:https://blog.csdn.net/xyj3602...

在router.js裏添加一個標識用於判斷頁面是否須要緩存.

2三、vue的兩大核心：數據驅動和組件
https://www.jianshu.com/p/293...
https://www.cnblogs.com/liuti...
2四、路由傳遞參數：https://blog.csdn.net/crazywo...
2五、vue全家桶：http://doc.liangxinghua.com/v...
2六、hash和history兩種模式之間的區別：
https://www.cnblogs.com/JRliu...
2七、vue-router怎樣實現頁面跳轉
https://blog.csdn.net/u014689...
https://www.cnblogs.com/wisew...
https://blog.csdn.net/sunshao...
2八、vue $router和$route的區別
https://blog.csdn.net/wangguo...
2九、vue中內置的組件

Vue中內置的組件有如下幾種：
1）component
2）transition
3）transition-group
4）keep-alive
5）slot
1）component組件：有兩個屬性---is inline-template
渲染一個‘元組件’爲動態組件，按照'is'特性的值來渲染成那個組件
2）transition組件：爲組件的載入和切換提供動畫效果，具備很是強的可定製性，支持16個屬性和12個事件
3）transition-group：做爲多個元素/組件的過渡效果
4）keep-alive：包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們
5）slot：做爲組件模板之中的內容分發插槽，slot元素自身將被替換

30、Vue文本渲染三種方法 {{}}、v-html、v-text

{{ }}將元素當成純文本輸出
v-html會將元素當成HTML標籤解析後輸出
v-text會將元素當成純文本輸出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue文本渲染三種方法</title>
</head>
<body>
    <div id="app">
         <!--   {}}/v-text不能解析html元素，只會照樣輸出 -->
         <p>{{hello}}</p>
        <p v-text = 'hello'></p>
        <p v-html = 'hello'></p>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            hello:'<span>hello world</span>'
        }
    })
</script>
</html>

3一、key

vue中列表循環需加:key="惟一標識" 惟一標識能夠是item裏面id index等，由於vue組件高度複用
增長Key能夠標識組件的惟一性，爲了更好地區別各個組件
key的做用主要是爲了高效的更新虛擬DOM

key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。若是不使用 key，Vue 會使用一種最大限度減小動態元素而且儘量的嘗試修復/再利用相同類型元素的算法。使用 key，它會基於 key 的變化從新排列元素順序，而且會移除 key 不存在的元素。
有相同父元素的子元素必須有獨特的 key。重複的 key 會形成渲染錯誤。

最多見的用例是結合 v-for：

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

v-for爲何要加key: https://www.jianshu.com/p/4bd...

3二、頁面跳轉後，回到此頁面時，頁面不刷新
https://www.cnblogs.com/yiyib...
3三、Vue項目使用AES作加密：https://www.cnblogs.com/libo0...
前端對稱加密--js對用戶名密碼進行DES加密：https://blog.csdn.net/frankch...（使用的是這種方式）
3四、vue中使用vue-quill-editor富文本編輯器，自定義toolbar修改工具欄options：https://blog.csdn.net/div_ma/...
3五、按鈕級權限控制：https://www.jianshu.com/p/e50...
vue + vuex + directives實現權限按鈕的思路： https://www.jianshu.com/p/eea...

要求權限控制到按鈕級別,也就是說對於不一樣的用戶,可操做的按鈕是不同的,換言之,有些按鈕對某些客戶是不可見的.例如:用戶A能看到"新增"按鈕,而用戶B看不到？
1.定義一個全局方法,配合v-if實現;在用戶登陸成功後,獲取用戶的按鈕權限(數組格式),存儲到store中，定義公共函數hasPermission，在main.js中引入,在須要的按鈕上使用便可
二、經過directives在全局main.js中註冊，自定義指令，頁面中按鈕只需加v-has便可。
1> meta字段裏放入的是該用戶在此頁面能操做的按鈕權限的標識permission，好比這個頁面有add、edit、delele權限，可是你只想讓這個用戶使用add，那麼就"permission": ['add']

{
        "path": "/system",
        "component": "Layout",
        "redirect": "/system/userList",
        "name": "系統管理",
        "meta": {
          "title": "系統管理",
          "icon": "el-icon-setting"
        },
        "children": [{
          "path": "userList",
          "name": "用戶列表",
          "component": "user/index",
          "meta": {
            "title": "用戶列表",
            "icon": "el-icon-tickets",
            "permission": ['add'] //按鈕權限
          }
        }
  ]
}

接着自定義指令btnPermission.js，在mian.js導入

import Vue from 'vue'

/**權限指令**/
Vue.directive('has', {
    inserted: function (el, binding, vnode) {
        let permissionList = vnode.context.$route.meta.permission;
        if (!permissionList || !permissionList.includes(binding.value.role)) {
            el.parentNode.removeChild(el)
        }
    }
})
export { has }

使用：

<el-button type="success" icon="el-icon-circle-plus-outline" @click="handeleAdd" v-has="{role : 'add'}">添加</el-button>

3六、vue權限控制：https://www.jianshu.com/p/e5e...
vue實現菜單權限控制：https://www.cnblogs.com/ssh-0...
VUE 動態菜單及視圖權限：https://www.jianshu.com/p/fca...
Vue 動態路由的實現(後臺傳遞路由，前端拿到並生成側邊欄)：https://segmentfault.com/a/11...
Vue自定義指令實現按鈕級權限控制功能：https://www.cnblogs.com/leeke...
3七、瞭解ESlint和其相關操做：https://www.jianshu.com/p/f75...
3八、devtools調試工具
3九、談談你對vue的認識：https://blog.csdn.net/keep789...
40、vue中的全部axios請求都會發送2次，可是第一次不返回數據的緣由

緣由：跨域請求以前首先要發送options請求，詢問服務器是否有權限訪問，是否容許該請求類型，若是容許則發起實際請求。

瀏覽器分爲簡單請求以及非簡單請求：

解決方案：
跨域請求須要先發一次Option預請求，OPTIONS是檢驗是否容許跨域的，若是不但願OPTIONS請求，直接讓後端遇到option直接返回就能夠了，前端可不作處理。
跨域資源共享 CORS 詳解： http://www.ruanyifeng.com/blo...
4一、VUE的兩種跳轉push和replace對比區別
https://www.cnblogs.com/both-...
this.$router.push()
跳轉到不一樣的url，但這個方法會向history棧添加一個記錄，點擊後退會返回到上一個頁面。
this.$router.replace()
一樣是跳轉到指定的url，可是這個方法不會向history裏面添加新的記錄，點擊返回，會跳轉到上上一個頁面。上一個記錄是不存在的。
this.$router.go(n)
相對於當前頁面向前或向後跳轉多少個頁面,相似 window.history.go(n)。n可爲正數可爲負數。正數返回上一個頁面

4二、computed和watch

computed用來監控本身定義的變量，該變量不在data裏面聲明，直接在computed裏面定義，而後就能夠在頁面上進行雙向數據綁定展現出結果或者用做其餘處理；
computed比較適合對多個變量或者對象進行處理後返回一個結果值，也就是數多個變量中的某一個值發生了變化則咱們監控的這個值也就會發生變化，舉例：購物車裏面的商品列表和總金額之間的關係，只要商品列表裏面的商品數量發生變化，或減小或增多或刪除商品，總金額都應該發生變化。這裏的這個總金額使用computed屬性來進行計算是最好的選擇
watch主要用於監控vue實例的變化，它監控的變量固然必須在data裏面聲明才能夠，它能夠監控一個變量，也能夠是一個對象
watch通常用於監控路由、input輸入框的值特殊處理等等，它比較適合的場景是一個數據影響多個數據

4三、全局鉤子router.beforeEach做用於全部路由，裏面的參數

to表示即將要進入的路由對象，
from表示即將要離開的路由對象，
next是繼續跳轉或中斷的方法。

router.beforeEach((to,from,next) => {
    console.log(to)
    console.log(from)
})

4四、vue+axios 前端實現登陸攔截（路由攔截、http攔截）：https://www.cnblogs.com/guoxi...

首先在定義路由的時候就須要多添加一個自定義字段requireAuth（true or false），在須要登陸的路由的meta中添加響應的權限標識requireAuth，經過這個字段來判斷該路由是否須要登陸權限，再經過vuex state獲取當前的token是否存在，須要的話，同時當前應用不存在token，則跳轉到登陸頁面，進行登陸，登陸成功後跳轉到目標路由。若是用戶已經登陸，則順利進入路由，不然就進入登陸頁面。

//使用鉤子函數對路由進行權限跳轉
router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requireAuth)) {
    if (store.getters.token) {
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath} // 將跳轉的路由path做爲參數，登陸成功後跳轉到該路由
      })
    }
    }else {
    next();
    }
    });

4五、動態路由加載權限菜單

vue項目實現動態路由的方式大致可分爲兩種:
1.前端這邊把路由寫好，登陸的時候根據用戶的角色權限來動態展現路由(前端控制路由)
2.後臺傳來當前用戶對應權限的路由表，前端經過調接口拿到後處理(後端處理路由)
beforeEach路由攔截，進入判斷，若是發現本地沒有路由數據，那就利用axios後臺取一次，取完之後，利用localStorage存儲起來，利用addRoutes動態添加路由。

4六、懶加載

component:  resolve => require(['../page/my/my.vue'], resolve),//懶加載

懶加載的最終實現方案

一、路由頁面以及路由頁面中的組件全都使用懶加載
　　優勢：（1）最大化的實現隨用隨載
　　　　　（2）團隊開發不會由於溝通問題形成資源的重複浪費　　　　
　　缺點：（1）當一個頁面中嵌套多個組件時將發送屢次的http請求，可能會形成網頁顯示過慢且渲染良莠不齊的問題
二、路由頁面使用懶加載，而路由頁面中的組件按需進行懶加載, 即若是組件不大且使用不太頻繁, 直接在路由頁面中導入組件, 若是組件使用較爲頻繁使用懶加載
　　優勢：（1）可以減小頁面中的http請求，頁面顯示效果好
　　缺點：（2）須要團隊事先交流，在框架中分別創建懶加載組件與非懶加載組件文件夾

三、路由頁面使用懶加載，在不特別影響首頁顯示延遲的狀況下，根頁面合理導入複用組件，再結合方案2
　　優勢：（1）合理解決首頁延遲顯示問題
　　　　　（2）可以最大化的減小http請求，且作其餘他路由界面的顯示效果最佳
　　缺點：（1）仍是須要團隊交流，創建合理區分各類加載方式的組件文件夾

4七、router-link 與 router-view：https://www.cnblogs.com/dongz...

在菜單欄使用router-link配置菜單鏈接地址，使用router-view 顯示鏈接地址的詳細內容
<router-view> 是用來渲染經過路由映射過來的組件，當路徑更改時，<router-view> 中的內容也會發生更改

4八、easy-mock: https://segmentfault.com/a/11...

https://www.easy-mock.com/docs

4九、Vue中v-if和v-show的使用場景：https://blog.csdn.net/grapelo...

50、v-show和v-if指令的共同點和不一樣點：

共同點：
v-if和v-show都是經過判斷綁定數據的truefalse來展現
不一樣點：
v-if只有在判斷爲true的時候纔會對數據進行渲染，false的時候把包含的代碼進行刪除。除非再次進行數據渲染，v-if纔會從新判斷。能夠說是用法比較傾向於對數據一次操做。
v-show是不管判斷是什麼都會先對數據進行渲染，只是false的時候對節點進行display:none;的操做。因此再不從新渲染數據的狀況下，改變數據的值可使數據展現或隱藏。
vue-show本質就是標籤display設置爲none，控制隱藏
vue-if是動態的向DOM樹內添加或者刪除DOM元素

5一、如何讓CSS只在當前組件中起做用:

將當前組件的<style>修改成<style scoped>

5二、什麼是vue生命週期

答： Vue 實例從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期。

5三、vue生命週期的做用是什麼

答：它的生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。

5四、vue生命週期總共有幾個階段

答：能夠總共分爲8個階段：建立前/後, 載入前/後,更新前/後,銷燬前/銷燬後

5五、第一次頁面加載會觸發哪幾個鉤子

答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子

5六、DOM 渲染在哪一個週期中就已經完成

答：DOM 渲染在 mounted 中就已經完成了。

5七、簡單描述每一個週期具體適合哪些場景

答：生命週期鉤子的一些使用方法：
beforecreate : 能夠在這加個loading事件，在加載實例時觸發
created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用
mounted : 掛載元素，獲取到DOM節點
updated : 若是對數據統一處理，在這裏寫上相應函數
beforeDestroy : 能夠作一個確認中止事件的確認框
nextTick : 更新數據後當即操做dom

5八、說出至少4種vue當中的指令和它的用法？

v-if：判斷是否隱藏；v-for：數據循環；v-bind:class：綁定一個屬性；v-model：實現雙向綁定

5九、爲何避免 v-if 和 v-for 用在一塊兒

當 Vue 處理指令時，v-for 比 v-if 具備更高的優先級，經過v-if 移動到容器元素，不會再重複遍歷列表中的每一個值。取而代之的是，咱們只檢查它一次，且不會在 v-if 爲否的時候運算 v-for。

60、VNode是什麼？虛擬 DOM是什麼？

Vue在頁面上渲染的節點，及其子節點稱爲「虛擬節點 (Virtual Node)」，簡寫爲「VNode」。「虛擬 DOM」是由 Vue 組件樹創建起來的整個 VNode 樹的稱呼。
爲何使用virtual-dom？由於直接頻繁地操做dom會有很高的性能消耗
爲何要使用虛擬DOM？
以前使用原生js或者jquery寫頁面的時候會發現操做DOM是一件很是麻煩的一件事情，每每是DOM標籤和js邏輯同時寫在js文件裏，數據交互時不時還要寫不少的input隱藏域，若是沒有好的代碼規範的話會顯得代碼很是冗餘混亂，耦合性高而且難以維護。
另一方面在瀏覽器裏一遍又一遍的渲染DOM是很是很是消耗性能的，經常會出現頁面卡死的狀況；因此儘可能減小對DOM的操做成爲了優化前端性能的必要手段，vdom就是將DOM的對比放在了js層，經過對比不一樣之處來選擇新渲染DOM節點，從而提升渲染效率。

6一、爲何叫virtual-dom，實質是什麼？

顧名思義，虛擬dom，使用JS對象模擬dom進行操做（vue中叫作vnode）

6二、computed和methods的區別。

1> 寫法上的區別是computed計算屬性的方式在用屬性時不用加(),而methods方式在使用時要像方法同樣去用，必須加()
2> computed只在初始化時被調用；methods會在數據變化時被調用, 即便變更的數據與自身無關。
3> computed是基於它的依賴緩存，只有相關依賴發生改變時纔會從新取值；methods在從新渲染的時候，函數總會從新調用執行。因此使用computed會比methods方法性能更好。

https://www.cnblogs.com/rainb...
https://segmentfault.com/a/11...

6三、Mutation和Action的區別

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

action：簡單來講就是異步操做數據
mutation：把處理數據邏輯方法所有放在mutation裏面使數據和視圖分離（vuex中store數據改變惟一的方法就是mutation）

流程順序
「相應視圖—>修改State」拆分紅兩部分，視圖觸發Action，Action再觸發Mutation。
角色定位
基於流程順序，兩者扮演不一樣的角色。
Mutation：專一於修改State，理論上是修改State的惟一途徑。
Action：業務代碼、異步請求。
限制
角色不一樣，兩者有不一樣的限制。
Mutation：必須同步執行。
Action：能夠異步，但不能直接操做State。

6三、實現vue2.0響應式的基本思路：http://www.cnblogs.com/caizhe...
https://www.cnblogs.com/caizh...
6四、v-if與v-show的區別:https://www.cnblogs.com/echol...
6五、v-for和v-if：https://www.jianshu.com/p/0f6...
6六、Vue.js面試題整理 : https://www.jianshu.com/p/b1d...
6七、vue兄弟組件之間的傳參：https://www.jianshu.com/p/e2e...
6八、vue面試中，常常會被問到的面試題：https://www.jianshu.com/p/662...
6九、vue和微信小程序的區別、比較：https://segmentfault.com/a/11...
70、ajax和axios、fetch的區別：https://www.jianshu.com/p/8bc...
7一、jquery和vue對比：https://www.cnblogs.com/MR-YY...
7二、vue數組添加屬性，渲染失敗緣由及解決方案。
https://www.cnblogs.com/tugen...
7三、Vue中this.$router.push參數獲取:https://blog.csdn.net/qq_1564...
7四、Vue2.0 阻止事件冒泡
https://www.jianshu.com/p/62f...

jquery和vue對比

vue是基於mvvm思想設計的框架，無非就是實現的方式不同，在不一樣場景下性能上會有一些差別
根本區別：將原有的直接操做dom的思想轉變到操做數據。
它經過雙向數據綁定把 View 層和 Model 層鏈接了起來，經過對數據的操做就能夠完成對頁面視圖的渲染。
jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操做，其實和原生的HTML的區別只在於能夠更方便的選取和操做DOM對象，而數據和界面是在一塊兒的。好比須要獲取label標籤的內容：$("lable").val();,它仍是依賴DOM元素的值。
Vue則是經過Vue對象將數據和View徹底分離開來了。對數據進行操做再也不須要引用相應的DOM對象，能夠說數據和View是分離的，他們經過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。
vue適用的場景：複雜數據操做的後臺頁面，表單填寫頁面
jquery適用的場景：好比說一些html5的動畫頁面，一些須要js來操做頁面樣式的頁面。
然而兩者也是能夠結合起來一塊兒使用的，vue側重數據綁定，jquery側重樣式操做，動畫效果等，則會更加高效率的完成業務需求。
build目錄爲webpack打包文件，dist目錄爲打包後生成的文件，node_modules 引用的外部組件。

舉例說明

一、列表添加一個元素,vue只須要向數據message裏面push一條數據便可完成添加一個li標籤的操做，而jquery則須要獲取dom元素節點，並對dom進行添加一個標籤的操做，若是dom結構特別複雜，或者添加的元素很是複雜，則代碼會變得很是複雜且閱讀性低。
二、控制按鈕的顯示隱藏，vue只須要控制屬性isShow的值爲true和false便可，而jquery則仍是須要操做dom元素控制按鈕的顯示和隱藏

vue-resource和axios的區別

vue2.0以後，就再也不對vue-resource更新，而是推薦使用axios。基於 Promise 的 HTTP 請求客戶端，可同時在瀏覽器和 Node.js 中使用

axios與ajax的區別

axios基於Promise用於瀏覽器和node.js的的HTTP客戶端。
axios是經過promise實現對ajax技術的一種封裝，就像jQuery實現ajax封裝同樣。
簡單來講： ajax技術實現了網頁的局部數據刷新，axios實現了對ajax的封裝。
jquery提交數據的時候，默認是以FormData的形式提交的，也就是Content-Type:"application/x-www-form-urlencoded",而axios默認是以Payload形式提交數據，也就是Content-Type:"application/json"

兄弟組件傳遞

父---子父組件經過標籤傳值，子組件經過props接收
子---父經過this.$emit將方法和數據傳遞給父組件，父組件經過$on接收

1.父組件與子組件傳值
父組件傳給子組件：子組件經過props方法接受數據；
子組件傳給父組件：$emit方法傳遞參數;
2.非父子組件間的數據傳遞，兄弟組件傳值
EventBus，就是建立一個事件中心，至關於中轉站，能夠用它來傳遞事件和接受事件，項目比較小時，用這個比較合適；
VueX，建立一個數據倉庫，整個項目全局均可以往這個倉庫存放數據和讀取數據

若是父組件想要調用子組件的方法
vue會給子組件添加一個ref屬性，經過this.$refs.ref的值即可以獲取到該子組件，而後即可以調用子組件中的任意方法

vue和小程序區別及進程

連接描述

項目步驟（vue）

一、build和config是webpack的配置文件，src中存放着框架的主要文件，api是已經封裝好的api請求，components是咱們的UI組件。mock是便於咱們前端調試的一個工具，能夠截獲http請求，返回數據，從而作到獨立於後端開發，加快咱們的開發進度，當咱們須要請求服務器的時候要把這個文件夾刪掉。是用vue-cli的webpack-template爲基礎模板構建的。

二、當咱們須要提交頁面放到服務器上也很簡單，運行
npm run build:prod
項目目錄下就會多出一個dist文件夾，裏面有index.html文件和static文件夾，放在服務器上就行。不須要在服務器上安裝任何環境，甚至不須要node便可。不再用爲發佈項目操心了。

三、使用單頁應用強大的路由來作登陸。框架採用的是攔截導航，判斷登陸與否和是否有權限，讓它完成繼續跳轉或重定向到登陸界面。判斷token是否存在，若是存在token，就繼續路由跳轉，若是不存在，就跳轉到登陸界面。

四、登陸流程是在客戶端發送帳號密碼到服務端，服務端驗證成功後返回token存儲用戶的權限，前端用Cookie把token存儲在本地，在路由跳轉（router.beforeEach）中判斷是否存在token，另外前端能夠經過token請求服務端獲取userInfo，在vuex中存儲着用戶的信息（用戶名，頭像，註冊時間等等）。登陸成功後，服務端會返回一個token（該token的是一個能惟一標示用戶身份的一個key），以後咱們將token存儲在本地cookie之中，這樣下次打開頁面或者刷新頁面的時候能記住用戶的登陸狀態，不用再去登陸頁面從新登陸了。ps:爲了保證安全性，我司如今後臺全部token有效期(Expires/Max-Age)都是Session，就是當瀏覽器關閉了就丟失了。從新打開遊覽器都須要從新登陸驗證，後端也會在每週固定一個時間點從新刷新token，讓後臺用戶所有從新登陸一次，確保後臺用戶不會由於電腦遺失或者其它緣由被人隨意使用帳號。

五、權限控制就是在路由跳轉（router.beforeEach）中判斷token中的權限和要去往(to)頁面的路由信息(router meta)中配置的權限是否匹配，同時咱們的側邊欄也是根據權限動態生成的，當所登陸的帳號沒有權限訪問時，就不顯示在側邊欄中（例如訪客登陸就沒法看到編輯器的側邊欄選項），這樣用戶既看不到側邊欄選項，又沒法直接訪問到，雙重控制更安全。

1)登陸：當用戶填寫完帳號和密碼後向服務端驗證是否正確，驗證經過以後，服務端會返回一個token，拿到token以後（我會將這個token存貯到cookie中，保證刷新頁面後能記住用戶登陸狀態），前端會根據token再去拉取一個 user_info 的接口來獲取用戶的詳細信息（如用戶權限，用戶名等等信息）。
2)權限驗證：經過token獲取用戶對應的 role，動態根據用戶的 role 算出其對應有權限的路由，經過 router.addRoutes 動態掛載這些路由。

vue-router

一、組件，顧名思義就是一組元素組成的一個原件（理解的比較淺顯、直白），在Vue.js中，表現爲一個自定義元素。

二、template是放置組件的組成部分——html元素的地方，是整個組件的模板構成，會在另外一個引用這個文件的組件中顯示出來。

三、用vue主要開發單頁面應用，沒有頁面之間的跳轉，在vue中，一個所謂的「頁面」實則是一個看起來很像「頁面」的一個組件（這個組件大部分狀況下包含其餘子組件）而已。vue-router是在vue中控制路由的。ps：若是你不太理解路由這個概念，能夠簡單的理解爲url重的hash部分，只不過vue作了一些封裝和完善。要控制路由，還須要藉助兩個vue-router自帶的兩個組件router-view和router-link。

vuex

一、vuex是什麼？怎麼使用？哪一種功能場景使用它？
vue框架中狀態管理。在main.js引入store，注入。新建一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車
二、vuex有哪幾種屬性？
有五種，分別是 State、 Getter、Mutation 、Action、 Module。
三、Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
四、你不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交(commit) mutations。有些數據仍是須要用 vuex 來統一管理的，如登陸token,用戶信息，或者是一些全局我的偏好設置等，仍是用vuex管理更加的方便。後臺項目，每個請求都是要帶 token 來驗證權限的。
五、Vuex詳解：https://segmentfault.com/a/11...

ElementUI

一、element ui 表格合併單元格

主要是根據data中的column_row_offset表示哪幾行要合併。

二、input校驗輸入長度, 當輸入長度超過8位數

<input type="text" maxlength="9" v-model="data" @input="verifyData">

verifyData() {
  if (this.data.length > 8) {
    Toast('已超過最大的充值額度');
  }
},

webpack

熱刷新是什麼呢？

就是咱們該完代碼保存以後webpack會自動打包引發瀏覽器自動刷新，你只須要把精力都專一在代碼研發上不須要再分散精力在打包上。節省了時間和精力，效率更高了。

先後端交互

一、先後端和產品一塊兒開會討論項目，以後後端根據需求，首先定義數據格式和api，而後 mock api 生成好文檔，咱們前端纔是對接接口的。
二、先後端交互不可避免的就會遇到跨域問題，後端配置容許跨域，通常是不容許的，前端能夠設置nginx反代理。
三、前端分頁和後端分頁。

前端分頁
前端分頁通常用於數據量較小的狀況，一次請求把數據所有從後端請求回來。
後端分頁
後端分頁適用於數據量偏大時的狀況，減少請求傳輸壓力。前端須要將每頁條數和當前頁傳給後端，後端根據條件查詢出數據再傳給前端，包括總條數、當前頁、每頁多少條數據等。
前端顯示的當前頁和每頁多少條數據由後端傳回的數據決定，不然出現改變前端參數，還未發請求時，頁碼的錯亂。
當改變每頁多少條時，當前頁參數置爲首頁。

Boostrap

一、在Bootstrap中，柵格系統將容器均分爲12份，再調整內外邊距，結合媒體查詢，造就了這一強大的柵格系統。

其主要規則是：
一、一個.row應該包含在一個.container當中，才能由於內外邊距的正負抵消而有合適的對齊。
二、在.row當中建立一組.column造成水平方向上的容器。
三、具體內容應該放在.column中，並且只有.column能夠做爲.row的直接子元素。
二、Bootstrap面試題： https://www.jianshu.com/p/798...

網格的基本結構

<div class="container">

   <div class="row">

      <div class="col-*-*"></div>

      <div class="col-*-*"></div>      

   </div>

   <div class="row">...</div>

</div>

<div class="container">....

/* 超小設備（手機，小於 768px） */

/* Bootstrap 中默認狀況下沒有媒體查詢 */

/* 小型設備（平板電腦，768px 起） */

@media (min-width: @screen-sm-min) { ... }

/* 中型設備（臺式電腦，992px 起） */

@media (min-width: @screen-md-min) { ... }

/* 大型設備（大臺式電腦，1200px 起） */

@media (min-width: @screen-lg-min) { ... }

二、是否使用過bootstrap，說說他的優缺點

優勢：
比較成熟，在大量的項目中充分的使用和測試，界面和諧，容易上手，可快速開發，節省時間，再也不浪費時間寫腳本；
響應式框架，經過多個瀏覽器測試，對將來的技術具備兼容性；
擁有完善的文檔，使用起來更方便，有大量的組件樣式，接受定製；
缺點：
框架很是的詳細，大量的組件樣式，這既是優勢也是缺點，由於定製化很高，你能夠直接拿過來就用。
若是有本身特殊的需求，就須要從新定製樣式，若是一個網站中有大量的非bootstrap「風格」的樣式存在，那麼你就須要作大量的css重寫，所以也就失去了使用框架的意義。在不少狀況下，最好的就是選擇一個有最少樣式的框架，由於這樣的話比較容易自定義。添加新的css規則要比複寫現有的樣式規則方便多了，並且若是你在現有的樣式上添加新的樣式，這確定會增長css文件的大小。
class 命名不夠語義化，而且各類縮寫，最近開始整混合 APP，選框架的時候首選就是它，但以前搞 PC 一直沒注意，後來搞混合右鍵屬性看它的時候，瞬間一陣涼風襲來，Bootstrap好小，小到我只好選擇別的框架。