資訊專欄INFORMATION COLUMN
摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。
vue基礎
1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...
2、 VUE雙向綁定的原理：
答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個方法重新定義了對象獲取屬性值(get)和設置屬性值(set)的操作來實現的。Vue的雙向數據綁定就是只要在讀取值（getter）時收集觀察者，在賦值（setter）時觸發觀察者更新函數，就可以實現數據變更，從而實現DOM重新渲染。
3、vue2.0中router-link詳解：https://blog.csdn.net/lhjueji...
4、 vue項目開發前的es6的知識儲備:https://www.cnblogs.com/untir...
5、 箭頭函數和普通函數的區別：https://www.jianshu.com/p/73c...
總結：
1>箭頭函數寫代碼擁有更加簡潔的語法；
2>箭頭函數的this永遠指向其上下文的 this，任何方法都改變不了其指向，如call(), bind(), apply(); 普通函數的this指向調用它的那個對象
6、Vue的生命周期，詳細介紹各個階段
創建前/后
在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個階段：創建前/后, 載入前/后,更新前/后,銷毀前/銷毀后.
7、簡單描述每個周期具體適合哪些場景？
生命周期鉤子的一些使用方法：
beforecreate : 可以在這加個loading事件，在加載實例時觸發
created : 初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用
mounted : 掛載元素，獲取到DOM節點
updated : 如果對數據統一處理，在這里寫上相應函數
beforeDestroy : 可以做一個確認停止事件的確認框
nextTick : 更新數據后立即操作dom
8、 vue-router實現原理
根據url來path匹配相應的 component ，在把匹配到的component渲染到指定的dom上就好了
vue-router是vue的路由插件,組件：router-link router-view說簡單點，vue-router的原理就是通過對URL地址變化的監聽，繼而對不同的組件進行渲染。每當URL地址改變時，就對相應的組件進行渲染。原理是很簡單，實現方式可能有點復雜，主要有hash模式和history模式。
9、Vuex各個狀態
有 5 種，分別是 state、getter、mutation、action、modulestate 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，使得結構非常清晰，方便管理
10、axios是什么？怎么使用？描述使用它實現登錄功能的流程
axios是請求后臺資源的模塊。 npm i axios -S
如果發送的是跨域請求，需在配置文件中 config/index.js 進行配置
11、兄弟組件，父子傳值
父---子 父組件通過標簽傳值，子組件通過props接收
子---父 通過this.$emit將方法和數據傳遞給父組件，父組件通過$on接收1.父組件與子組件傳值
父組件傳給子組件： 子組件通過props方法接受數據；
子組件傳給父組件：$emit方法傳遞參數;
2.非父子組件間的數據傳遞，兄弟組件傳值
EventBus，就是創建一個事件中心，相當于中轉站，可以用它來傳遞事件和接受事件，項目比較小時，用這個比較合適；
VueX，創建一個數據倉庫，整個項目全局都可以往這個倉庫存放數據和讀取數據
如果父組件想要調用子組件的方法
vue會給子組件添加一個ref屬性，通過this.$refs.ref的值便可以獲取到該子組件，然后便可以調用子組件中的任意方法
12、vue怎么實現頁面的權限控制
利用 vue-router 的 beforeEach 事件，可以在跳轉頁面前判斷用戶的權限（利用 cookie 或 token），是否能夠進入此頁面，如果不能則提示錯誤或重定向到其他頁面，在后臺管理系統中這種場景經常能遇到。
13、vue里面的虛擬dom
簡單來說，虛擬DOM是用Object來代表一顆節點，這個Object叫做VNode，然后使用兩個VNode進行對比，根據對比后的結果修改真實DOM。為什么是兩個VNode？因為每次渲染都會生成一個新的VNode，然后和上一次渲染時用的VNode進行對比。然后將這一次新生成的VNode緩存，用來進行下一次對比。
14、vue中scoped的原理：https://www.jianshu.com/p/b92...
加了 scoped 的話，編譯的時候就把對應的選擇器和對應的元素綁定一個由全局唯一的字符串產生的屬性。vue通過在DOM結構以及css樣式上加上唯一的標記，保證唯一，達到樣式私有化，不污染全局的作用
15、如何解決vue開發中父組件添加scoped后無法修改子組件樣式問題
父組件：使用深度作用選擇器
http://www.php.cn/js-tutorial...
https://www.cnblogs.com/ruish...
子組件：
16、Vue國際化處理 vue-i18n 以及項目自動切換中英文
https://www.cnblogs.com/nxmin...
https://www.cnblogs.com/wangw...
17、Vue實現組件信息的緩存
https://blog.csdn.net/u014628...
18、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;
}
}
})
19、后臺管理系統登錄、權限：
https://juejin.im/post/591aa1...
https://www.cnblogs.com/heroz...
20、Axios封裝：https://blog.csdn.net/qq_3814...
1、首先，在vue-cli項目的src路徑下新建一個axios文件夾，在axios文件夾里新建aps.js和request.js，api.js用于寫接口，對axios的封裝寫在request.js里
2、然后開始統一封裝axios， 首先引入axios、qs依賴，引入main.js主要是用于后面對接口進行統一處理，比如調接口的時候，顯示loading等。
3、然后創建一個axios實例，這個process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面進行配置
4、axios實例創建好之后，開始使用request攔截器對axios請求配置做統一處理，然后是對response做統一處理
5、最后，將我們的axios實例暴露出去，整個axios的封裝就寫完了
6、axios封裝好之后，調用就很簡單了。我們把接口統一寫在api.js文件里。（當然，如果你的業務非常復雜的話，建議把不同業務的api分開放到不同的文件里，這樣方便以后維護）。然后在具體的組件中進行調用。
21、Vue.mixin() 可以將自定義的方法混入所有的 Vue 實例中。：https://segmentfault.com/a/11...
22、Vue keep-alive 實現后退緩存，前進刷新:https://blog.csdn.net/xyj3602...
在router.js里添加一個標識用于判斷頁面是否需要緩存.
23、vue的兩大核心：數據驅動和組件
https://www.jianshu.com/p/293...
https://www.cnblogs.com/liuti...
24、路由傳遞參數：https://blog.csdn.net/crazywo...
25、vue全家桶：http://doc.liangxinghua.com/v...
26、hash和history兩種模式之間的區別：
https://www.cnblogs.com/JRliu...
27、vue-router怎樣實現頁面跳轉
https://blog.csdn.net/u014689...
https://www.cnblogs.com/wisew...
https://blog.csdn.net/sunshao...
28、vue $router和$route的區別
https://blog.csdn.net/wangguo...
29、vue中內置的組件
Vue中內置的組件有以下幾種：
1）component
2）transition
3）transition-group
4）keep-alive
5）slot1）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會將元素當成純文本輸出
Vue文本渲染三種方法
{{hello}}
31、key
vue中列表循環需加:key="唯一標識" 唯一標識可以是item里面id index等，因為vue組件高度復用
增加Key可以標識組件的唯一性，為了更好地區別各個組件
key的作用主要是為了高效的更新虛擬DOMkey 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素并且盡可能的嘗試修復/再利用相同類型元素的算法。使用 key，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素。
有相同父元素的子元素必須有獨特的 key。重復的 key 會造成渲染錯誤。
最常見的用例是結合 v-for：
v-for為什么要加key: https://www.jianshu.com/p/4bd...
32、 頁面跳轉后，回到此頁面時，頁面不刷新
https://www.cnblogs.com/yiyib...
33、Vue項目使用AES做加密：https://www.cnblogs.com/libo0...
前端對稱加密--js對用戶名密碼進行DES加密：https://blog.csdn.net/frankch...（使用的是這種方式）
34、vue中使用vue-quill-editor富文本編輯器，自定義toolbar修改工具欄options：https://blog.csdn.net/div_ma/...
35、按鈕級權限控制：https://www.jianshu.com/p/e50...
vue + vuex + directives實現權限按鈕的思路： https://www.jianshu.com/p/eea...
要求權限控制到按鈕級別,也就是說對于不同的用戶,可操作的按鈕是不一樣的,換言之,有些按鈕對某些客戶是不可見的.例如:用戶A能看到"新增"按鈕,而用戶B看不到？1.定義一個全局方法,配合v-if實現;在用戶登錄成功后,獲取用戶的按鈕權限(數組格式),存儲到store中，定義公共函數hasPermission，在main.js中引入,在需要的按鈕上使用即可
2、通過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 }
使用：
添加
36、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...
37、了解ESlint和其相關操作：https://www.jianshu.com/p/f75...
38、devtools調試工具
39、談談你對vue的認識：https://blog.csdn.net/keep789...
40、vue中的所有axios請求都會發送2次，但是第一次不返回數據的原因
原因：跨域請求之前首先要發送options請求，詢問服務器是否有權限訪問，是否允許該請求類型，如果允許則發起實際請求。
瀏覽器分為簡單請求以及非簡單請求：
解決方案：
跨域請求需要先發一次Option預請求，OPTIONS是檢驗是否允許跨域的，如果不希望OPTIONS請求， 直接讓后端遇到option直接返回就可以了，前端可不做處理。
跨域資源共享 CORS 詳解：http://www.ruanyifeng.com/blo...
41、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可為正數可為負數。正數返回上一個頁面
42、computed和watch
computed用來監控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義，然后就可以在頁面上進行雙向數據綁定展示出結果或者用作其他處理；
computed比較適合對多個變量或者對象進行處理后返回一個結果值，也就是數多個變量中的某一個值發生了變化則我們監控的這個值也就會發生變化，舉例：購物車里面的商品列表和總金額之間的關系，只要商品列表里面的商品數量發生變化，或減少或增多或刪除商品，總金額都應該發生變化。這里的這個總金額使用computed屬性來進行計算是最好的選擇
watch主要用于監控vue實例的變化，它監控的變量當然必須在data里面聲明才可以，它可以監控一個變量，也可以是一個對象
watch一般用于監控路由、input輸入框的值特殊處理等等，它比較適合的場景是一個數據影響多個數據
43、全局鉤子router.beforeEach作用于所有路由，里面的參數
to表示即將要進入的路由對象，
from表示即將要離開的路由對象，
next是繼續跳轉或中斷的方法。
router.beforeEach((to,from,next) => {
console.log(to)
console.log(from)
})
44、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();
}
});
45、動態路由加載權限菜單
vue項目實現動態路由的方式大體可分為兩種:
1.前端這邊把路由寫好，登錄的時候根據用戶的角色權限來動態展示路由(前端控制路由)
2.后臺傳來當前用戶對應權限的路由表，前端通過調接口拿到后處理(后端處理路由)
beforeEach路由攔截，進入判斷，如果發現本地沒有路由數據，那就利用axios后臺取一次，取完以后，利用localStorage存儲起來，利用addRoutes動態添加路由。
46、懶加載
component: resolve => require(["../page/my/my.vue"], resolve),//懶加載
懶加載的最終實現方案
1、路由頁面以及路由頁面中的組件全都使用懶加載
優點：（1）最大化的實現隨用隨載
（2）團隊開發不會因為溝通問題造成資源的重復浪費
缺點：（1）當一個頁面中嵌套多個組件時將發送多次的http請求，可能會造成網頁顯示過慢且渲染參差不齊的問題2、路由頁面使用懶加載， 而路由頁面中的組件按需進行懶加載, 即如果組件不大且使用不太頻繁, 直接在路由頁面中導入組件, 如果組件使用較為頻繁使用懶加載
優點：（1）能夠減少頁面中的http請求，頁面顯示效果好
缺點：（2）需要團隊事先交流， 在框架中分別建立懶加載組件與非懶加載組件文件夾3、路由頁面使用懶加載，在不特別影響首頁顯示延遲的情況下，根頁面合理導入復用組件，再結合方案2
優點：（1）合理解決首頁延遲顯示問題
（2）能夠最大化的減少http請求， 且做其他他路由界面的顯示效果最佳
缺點：（1）還是需要團隊交流，建立合理區分各種加載方式的組件文件夾
47、router-link 與 router-view：https://www.cnblogs.com/dongz...
在菜單欄使用router-link配置菜單連接地址，使用router-view 顯示連接地址的詳細內容是用來渲染通過路由映射過來的組件，當路徑更改時， 中的內容也會發生更改
48、easy-mock: https://segmentfault.com/a/11...
https://www.easy-mock.com/docs
49、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元素
51、如何讓CSS只在當前組件中起作用:
將當前組件的