Vue的基礎面試題整理

一. vue的優點
　　1. 輕量級框架：只關注視圖層，是一個構建數據的試圖集合，大小只有十幾kb;
　　2. 雙向數據綁定；
　　3. 組件化： 保留了react的優點，實現了html的封裝和重用，構建單數據應用方面有優勢；
　　4. 試圖/模型/結構分離：使數據更改更為簡單；
　　5. 虛擬DOM: dom的操作是非常耗費性能的，不再使用原生的dom操作節點，極大的解放dom
操作，但是具體操作的還是dom，不過是換了另一種方式；
　　6. 運行速度更快： 相比較react而言，都是操作虛擬dom，就性能而言，vue存在很大優勢；
　　7. 簡單易學，國人開發，中文文檔，容易理解和學習

二. vue父組件向子組件如何傳數據？
　　1. 父組件通過屬性的方式給子組件傳值
　　　　在data里定義變量，在methods里的方法里獲取數據，將數據給到data里的變量，再v-bind
　　　　的指令將父組件的data里拿到的數據綁定到子組件上

　　2. 子組件使用props接受父組件傳遞的屬性
　　　　子組件props中接受的屬性參數只需要給其定義好數據類型，然后直接在模板中使用即可！

三. 子組件向父組件如何傳數據？
　　1. 子組件通過this.$emit()的自定義事件方式將值傳遞給父組件
　　　this.$emit('change', params) ----- 事件名 ，參數
　　2. 在父組件中注冊該事件，並綁定父組件的方法接收數據
　　　在父組件上綁定change的方法，方法接收參數

四. v-show 和 v-if 的共同點和不同點
　　相同點：
　　　　v-if與v-show都可以動態控制dom元素顯示隱藏
　　不同點：
　　　　1. v-if 是動態的向dom樹添加或者刪除dom元素，而v-show是通過dom元素的display樣式
　　　　　　來控制顯隱；
　　　　2. v-if是惰性的，只有在條件第一次變為了真時，才開始局部編譯，編譯被緩存后，然后再
　　　　　　切換的時候進行局部卸載，而v-show是無論首次條件是否是真，都被編譯緩存，而且保存dom元素；
　　　　3. v-if有更高的切換消耗，v-show有更高的初始渲染消耗；
　　　　4. v-if適合運營條件不大可能改變， v-show適合頻繁切換；

五. 如何讓css只在當前組件中起作用, scoped的原理和作用
　　在style上加scoped屬性
　　用途： 防止全局同名css污染
　　原理： 在標簽上加v-data-something屬性，再在選擇器時加上對應的[v-data-something],即
　　　　　css帶屬性選擇器，以此完成類似作用域的選擇方式

六. 如何獲取dom
     1. 使用ref屬性
　　　　給相應的元素添加ref="name",然后通過this.refs.name 或者 this.refs['name']獲取
　　2. 通過js原生的加id的方式
　　　　直接給相應的元素加id，然后再通過document.getElemnetById('id')獲取

七. vue-loader是什么，使用它的用途？
　　作用：解析和轉換.vue文件，提取出其中的邏輯代碼script,樣式代碼style,以及html模板
　　　　template，在分別把他們交給對應的loader去處理；
　　用途：js可以寫es6, styley樣式可以寫sass、less, template可以加在jade等
　　css-loader: 加載由vue-loader提取出來的css代碼

八. 你知道vue中key的原理嗎？
　　1. key的作用主要是為了提交高效的更新虛擬dom,其原理是vue在patch(補丁)的過程中通過key
　　　　可以精准的判斷兩個節點是否是同一個，從而頻繁的更新不同元素，是整個patch的過程更加高效
　　　　減少dom操作，提高性能；
　　2. vue中使用相同的標簽名的元素過渡的時候需要使用key進行區分，否則vue之后更新其內部屬性
　　　　而不會觸發過渡效果；

九. v-model的作用
　　1. v-model是vue的雙向綁定指令，能將頁面上控件輸入的值同步更新到相關綁定的data屬性，
　　　　也會在更新data綁定屬性的時候，更新頁面上控件的值；
　　2. v-model主要提供了兩個功能，view層輸入值影響data的屬性，data屬性值發生改變會更新
　　　　view層的數據變化；
　　3. v-model其實是使用v-bind和input事件監聽值的變化；
　　　　其核心就是，一方面modal層通過defineProperty來劫持每個屬性，一旦監聽到變化通過相
　　　　關的頁面元素更新。另一方面通過編譯模板文件，為控件的v-model綁定input事件，從而頁面
　　　　輸入能實時更新相關data屬性值。

十. axios的安裝及使用, axios 的特點
　　安裝：
　　　　1. npm install axios 或者 bower install axios 或者 直接在index.js中加入：
　　　　　　< script src = "https://unpkg.com/axios/dist/axios.min.js" > < /script>
　　使用：
　　　　2. 在main.js中引入axios
　　　　　　import axios from 'axios'
　　　　3. 創建基本的axios配置
　　　　　　var $http = axios.create({})
　　　　4. 掛載到vue的原型
　　　　　　Vue.prototype.$http = $http
　　　　5. 發送請求
　　　　　　this.$http.post('/api/customer/sendMsg', param).then(function(res) {
　　　　　　　　console.log(res);
　　　　　　})
　　特點：
　　　　Axios是一個基於promise的http庫，可以用在瀏覽器和node.js中
　　　　　　1. 從瀏覽器中創建XMLHttpRequests;
　　　　　　2. node.js創建http請求；
　　　　　　3. 支持promise API;
　　　　　　4. 攔截請求和響應；
　　　　　　5. 取消請求；
　　　　　　6. 自動換json數據;
　　　　　　7. axios中發送的參數是data(適用於post、put請求)和 params(適用於get請求);

十一. 分別簡述watch和computed的使用場景
　　區別：
　　　　1. watch 屬性監聽 ----- 監聽屬性的變化
　　　　　computed 計算屬性 ---- 通過屬性計算得來的屬性
　　　　2. watch中的函數時不需要調用的
　　　　    computed內部的函數調用的時候不需要加()
            3. watch 需要在屬性變化時執行異步或者開銷較大的操作時使用
　　　　　computed 在對任何復雜的邏輯或一個數據屬性在他所依賴的屬性發生變化時，也要發生變化
　　　　　時使用
　　　　4. watch 一個對象，鍵是需要觀察的表達式，值是對應的回調函數，主要用來監聽某些特定數據
　　　　　　的變化，從而進行某些具體的邏輯操作；
　　　　　computed 中的函數必須用return返回最終的結果； computed 的屬性結果會被緩存，除非
　　　　　　依賴的響應式屬性變化才會被重新計算， 如果所依賴的屬性沒有發生變化，那么調用當前的函數
　　　　　　結果會從緩存中讀取；

　　場景：
　　　　1. watch 當一條數據影響多條數據的時候就要用watch ----- 搜索數據
　　　　2. computed 當一個屬性受多個屬性影響的時候 ----- 購物車商品結算的時候

十二.  $nextTick的原理
　　　用法：在下次dom更新循環結束之后執行延遲回調，在修改數據之后立即執行這個方法來獲取
　　　　　　更新之后的dom;

十三. vue組件中的data為什么必須是一個函數
　　如果data是一個函數的話，這樣每復用一次組件，就會返回一份新的data，類似於給每個組
　　件實例創建一個私有的數據空間，讓各個組件實例維護各自的數據。
　　而單純的寫成對象形式，就使得所有組件實例共用了一份data，就會造成一個變了全都會
　　變的結果。

十四. v-on 可以監聽多個方法嗎？
　　可以
　　1. v-on在vue2.x中測試,以下兩種均可
　　　　<button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠標進來1</button>
　　　　<button @mouseenter="onEnter" @mouseleave="onLeave">鼠標進來2</button>
　　2. 一個事件綁定多個函數，按順序執行，這里分隔函數可以用逗號也可以用分號
　　　　<button @click="a(),b()">點我ab</button>
　　　　<button @click="one()">點我onetwothree</button>

十五. vue的路由懶加載
　　1. 使用import
　　　　const Home = () => import('@/components/home')
　　2. vue異步組件技術 ==== 異步加載
　　　　{ path: '/home', name: 'home', component: resolve =>
　　　　require(['@/components/home'],resolve) }
　　3. webpack提供的require.ensure()
　　　　{ path: '/home', name: 'home', component: r =>
　　　　require.ensure([], () => r(require('@/components/home')),
　　　　'demo') }