vue細節的這方方面面

能體現本身平時的技術積累，和自學總結提高能力 這纔是不悔走進前端！

---

vue與React的區別

相同點：

React採用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，二者都須要編譯後使用；

中心思想相同：一切都是組件，組件實例之間能夠嵌套；都提供合理的鉤子函數，可讓開發者定製化地去處理需求；都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載；在組件開發中都支持mixins的特性。

不一樣點：

React採用的Virtual DOM會對渲染出來的結果作髒檢查；

Vue.js在模板中提供了指令，過濾器等，能夠很是方便，快捷地操做Virtual DOM。

---

vue路由的鉤子函數

首頁能夠控制導航跳轉，beforeEach，afterEach等，通常用於頁面title的修改。一些須要登陸才能調整頁面的重定向功能。

beforeEach主要有3個參數to，from，next：

to：route即將進入的目標路由對象，

from：route當前導航正要離開的路由

next：function必定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。能夠控制網頁的跳轉

---

vuex

只用來讀取的狀態集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 異步邏輯應該封裝在action中。 在main.js引入store，注入。新建了一個目錄store，….. export 。 場景有：單頁應用中，組件之間的狀態、音樂播放、登陸狀態、加入購物車

state

Vuex 使用單一狀態樹,即每一個應用將僅僅包含一個store

實例，但單一狀態樹和模塊化並不衝突。存放的數據狀態，不能夠直接修改裏面的數據。

mutations定義的方法動態修改Vuex 的 store 中的狀態或數據。

getters相似vue的計算屬性，主要用來過濾一些數據。

actions能夠理解爲經過將mutations裏面處裏數據的方法變成可異步的處理數據的方法，簡單的說就是異步操做數據。view 層經過 store.dispath 來分發 action。

---

vue-cli如何新增自定義指令？

1.建立局部指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 建立指令(能夠多個)
    directives: {
        // 指令名稱
        dir1: {
            inserted(el) {
                // 指令中第一個參數是當前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 對DOM進行操做
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})
複製代碼

2.全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})
複製代碼

3.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>
複製代碼

---

下面爲一些面試題

vue如何自定義一個過濾器？

html代碼：

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>
複製代碼

JS代碼：

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})
複製代碼

全局定義過濾器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

過濾器接收表達式的值 (msg) 做爲第一個參數。capitalize 過濾器將會收到 msg的值做爲第一個參數
複製代碼

---

對keep-alive 的瞭解？

keep-alive是 Vue 內置的一個組件，可使被包含的組件保留狀態，或避免從新渲染。

在vue 2.1.0 版本以後，keep-alive新加入了兩個屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優先級大於include) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 該組件是否緩存取決於include和exclude屬性 -->
  </component>
</keep-alive>
複製代碼

---

css只在當前組件起做用

答：在style標籤中寫入scoped便可 例如：

v-if 和 v-show 區別

答：v-if按照條件是否渲染，v-show是display的block或none；

route和router的區別

答：route是「路由信息對象」，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。

vue.js的兩個核心是什麼？

答：數據驅動、組件系統

vue幾種經常使用的指令

答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

vue經常使用的修飾符？

答：.prevent: 提交事件再也不重載頁面；

.stop: 阻止單擊事件冒泡；

.self: 當事件發生在該元素自己而不是子元素的時候會觸發；

.capture: 事件偵聽，事件發生的時候會調用

v-on 能夠綁定多個方法嗎？

答：能夠

vue中 key 值的做用？

答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。

若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，

而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。key的做用主要是爲了高效的更新虛擬DOM。

什麼是vue的計算屬性？

答：在模板中放入太多的邏輯會讓模板太重且難以維護，在須要對數據進行復雜處理，且可能屢次使用的狀況下，儘可能採起計算屬性的方式。

好處：

①使得數據處理結構清晰；

②依賴於數據，數據更新，處理結果自動更新 ； ③計算屬性內部this指向vm實例；

④在template調用時，直接寫計算屬性名便可；

⑤經常使用的是getter方法，獲取數據，也可使用set方法改變數據；

⑥相較於methods，無論依賴的數據變不變，methods都會從新計算，可是依賴數據不變的時候computed從緩存中獲取，不會從新計算。

vue等單頁面應用及其優缺點

答：

優勢：

Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、 輕量、簡潔、高效、快速、模塊友好。

缺點：

不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（若是要支持SEO，建議經過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可使用瀏覽器的導航按鈕須要自行實現前進、後退。

vue中子組件調用父組件的方法props

子組件調用父組件的方法可使用this.$emit()

---

vue等單頁面應用及其優缺點

優勢：

一、具備桌面應用的即時性、網站的可移植性和可訪問性。

二、用戶體驗好、快，內容的改變不須要從新加載整個頁面。

三、基於上面一點，SPA相對對服務器壓力小。

四、良好的先後端分離。SPA和RESTful架構一塊兒使用，後端再也不負責模板渲染、輸出頁面工做，web前端和各類移動終端地位對等，後端API通用化。

五、同一套後端程序代碼，不用修改就能夠用於Web界面、手機、平板等多種客戶端；

缺點：

一、不利於SEO。（若是你看中SEO，那就不該該在頁面上使用JavaScript，你應該使用網站而不是Web應用）

二、初次加載耗時相對增多。

三、導航不可用，若是必定要導航須要自行實現前進、後退。

---

Vue中引入組件的步驟?

1.採用ES6的import ... from ...語法或CommonJS的require()方法引入組件

2.對組件進行註冊

代碼以下

註冊

Vue.component('my-component', 
{  template: '<div>A custom component!</div>'})

複製代碼

3.使用組件

<my-component></my-component>
複製代碼

---

指令v-el的做用是什麼?

提供一個在頁面上已存在的 DOM 元素做爲 Vue 實例的掛載目標.能夠是 CSS 選擇器，也能夠是一個 HTMLElement 實例,

---

請列舉出3個Vue中經常使用的生命週期鉤子函數?

created: 實例已經建立完成以後調用,在這一步,實例已經完成數據觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段尚未開始, $el屬性目前還不可見

mounted: el被新建立的 vm.el 也在文檔內。

activated::keep-alive組件激活時調用

---

Vuex的組成：一個實例化的Vuex.Store由state, mutations和actions三個屬性組成:

state中保存着共有數據

改變state中的數據有且只有經過mutations中的方法,且mutations中的方法必須是同步的 若是要寫異步的方法,須要些在actions中, 並經過commit到mutations中進行state中數據的更改.

---

active-class是哪一個組件的屬性？嵌套路由怎麼定義？

vue-router模塊的router-link組件。

怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？

在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id 例如 : this.$route.params.id;

vue-router有哪幾種導航鉤子？

三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，做用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件

scss是什麼？安裝使用的步驟是？有哪幾大特性？

預處理css，把css當成函數編寫，定義變量,嵌套。

先裝css-loader、node-loader、sass-loader等加載器模塊，在webpack-base.config.js配置文件中加多一個拓展:extenstion，再加多一個模塊：module裏面test、loader

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

請求後臺資源的模塊。npm install axios -S裝好，而後發送的是跨域，需在配置文件中config/index.js進行設置。後臺若是是Tp5則定義一個資源路由。js中使用import進來，而後.get或.post。返回在.then函數中若是成功，失敗則是在.catch函數中

八、axios+tp5進階中，調用axios.post(‘api/user’)是進行的什麼操做？axios.put(‘api/user/8′)呢？

跨域，添加用戶操做，更新操做。

九、什麼是RESTful API？怎麼使用?

是一個api的標準，無狀態請求。請求的路由地址是固定的，若是是tp5則先路由配置中把資源路由配置好。標準有：.post .put .delete

十、vuex是什麼？怎麼使用？哪一種功能場景使用它？

vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車

app4.todos.push({ text: '新項目' })，列表最後添加了一個新項目。
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '學習 JavaScript' },
      { text: '學習 Vue' },
      { text: '整個牛項目' }
    ]
  }
})
複製代碼

使用 Object.freeze() ， 中止響應系統的追蹤變化 使數據不能改變，試圖不能刷新

$watch 是一個實例方法
vm.$watch('a', function (newValue, oldValue) {
  // 這個回調將在 `vm.a` 改變後調用
}
複製代碼

---

其下是vue細節方面的處理

1. 不要在選項屬性或回調上使用箭頭函數 ，箭頭函數沒有this

2. v-once 指令，數據改變時，{{}} 中的內容不會更新

3. 站點上動態渲染的任意 HTML 很容易致使 XSS 攻擊 毫不要對用戶提供的內容使用插值

4. {{ }} 裏面只能包含表達式的語句 三元運算符 函數表達式

5. attributeName 是獲取js動態值 Vue 實例有一個 data 屬性 attributeName，其值爲 "href"，那麼這個綁定將等價於 v-bind:href<a v-bind:[attributeName]="url"> ...

6. 空格和引號，放在 HTML 特性名裏是無效的，在 DOM 中使用模板時你須要迴避大寫鍵名 ❌錯誤寫法 <a v-bind:['foo' + bar]="value"> ...

7. 瀏覽器會把特性名所有強制轉爲小寫

<a v-bind:[someAttr]="value"> ...

8. 計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們纔會從新求值

9. 使用 watch 選項容許咱們執行異步操做 (訪問一個 API)，限制咱們執行該操做的頻率，並在咱們獲得最終結果前，設置中間狀態。這些都是計算屬性沒法作到的

10. created 裏 能夠 直接調用methous裏的方法，直接this.方法名

11. axios 裏面 .then 裏用箭頭函數做爲回調函數，回調函數裏 this 指向window ，耦合this指向。返回的是promise對象

12. axios.defaults.baseURL = "http://123.206.85.192:3000";設置請求路徑的公共部分

13. vue 中圖片懶加載 插件 vue-lazyload

14. 多種寫法 v-lazy 圖片路徑

15. 開發時，vue路由不使用h5模式，h5模式回車會404

16. router-link中 tag屬性定義標籤類型

17. router-link自帶class類名，定義激活樣式

18. router在vue實例裏掛載後，每一個組件都會有一個$router的屬性

methods：{
    fn(){
        this.$router.push("locain")
    }
}
//push   強制跳轉路徑
//go     數字決定返回仍是前進
//repalce  路由替換，將當前的歷史替換掉



## vue路由，redirect重定向

## vue路由中子路由不帶/，帶/表示了一級路由

this.$route.params.c
<router-link to="/article/1/a">商品1</router-link>
//  /article/2/d  匹配出一個對象
//  /article/:c/:a =>{c:2,a:'d'} = this.$route.params


## 若是用對象做爲to的屬性，而且使用了參數，必須給路由起個名字，經過名字跳轉

<router-link to='{name:'pro',params:{c:1,a:2}}'>1</router-link>
let routes=[{path:'/article/:c/:a',component:article,name:'pro'}]



## 路徑參數發生變化 vue實例中watch 監控參數的變化來發送ajax

watch：{
    $route(){
        alert('ajax');
    }
}


## 組件之間路由切換會進行銷燬， 用keep-alive 進行緩存，不讓銷燬。

## vue路由元信息

哪一個單頁面組件須要緩存，在路由配置里加上meta：{keep:true}
//須要緩存的頁面
<keep-alive>
<router-view  v-if="$router.meta.keep"></router-view>
</keep-alive>

//不須要緩存的頁面
<router-view  v-if="!$router.meta.keep"></router-view>


## 路由動畫

<transition name="fadeIn">
<keep-alive>
<router-view  v-if="$router.meta.keep"></router-view>
</keep-alive>
</transition name="fadeIn">



## 路由懶加載

再也不採用引入組件的方法，採用動態使用組件。
實現路由懶加載。
routes=[
{path:"/",name:"home",component:()=>import("../components/home.vue")}
]


## vue路由全局導航鉤子 

router.beforeEach(function (to,from,next) {
    //  攔截功能
    if(to.path==='/list'){
        next(path:'/add')
    }else{
        next()   
    }
})



## vuex

store  容器中保存着公共數據state

改變store中的state   經過mutation  中commit來改變方法去變動狀態，而且是同步的

須要支持異步，經過actions 改變  mutation  方法


狀態管理，將數據統一管理

vuex  單向數據流

容器store  是惟一的  只能有一個

store 被註冊到了實例上 ,  全部組件都會有一個  屬性  this.$store

vuex 實例上加上 strict ：true   嚴格模式  ，只能經過mutation 更改狀態

mutations   中的方法  第一個參數  是 state是自動放入的，默認指的是當前的state
第二個參數是載荷，傳過來的值
const  mutations = {
    add(state){
        state.count +=1;
    }
};



## vuex 提供日誌插件 logger 實時監聽並記錄vuex數據狀態變動

const  store = new Vuex.store({
 state,
 mutations,
 plugins:[logger()],
 strict:true
})



## vuex 提供 getters 計算屬性，至關於computed

const  getters = {
    val:(state)=>state.count%2?'1':'2';
}


import Vue from 'vue';
import Vuex from 'vuex';
import logger from 'vuex/dist/logger';

Vue.use(Vuex);

let state = {car:[]};
import mutations from './mutations';

export default new Vuex.store({
 state,
 mutations,
 strict:true,
 plugins:[logger()]
});
複製代碼

。。。未完待更新！