## 一. Vue核心小知識點（可以留言互動回答~簡單） 1. vue中 key 值的作用 2. vue中子組件調用父組件的方法 3. vue等單頁面應用及其優缺點 ## 二. `v-show`和`v-if`指令的共同點和不同點? * `v-show`指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏 * `v-if`指令是直接銷毀和重建DOM達到讓元素顯示和隱藏的效果 ## 三. 如何讓CSS只在當前組件中起作用? 將當前組件的`<style>`修改為`<style scoped>` ## 四. `<keep-alive>``</keep-alive>`的作用是什么? `<keep-alive>``</keep-alive>` 包裹動態組件時，會緩存不活動的組件實例,主要用于保留組件狀態或避免重新渲染。 大白話: 比如有一個列表和一個詳情，那么用戶就會經常執行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面，那么就可以對列表組件使用`<keep-alive>``</keep-alive>`進行緩存， 這樣用戶每次返回列表的時候，都能從緩存中快速渲染，***而不是重新渲染*** ## 五. 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` 實例, ## 七. 在Vue中使用插件的步驟 1. 采用ES6的`import ... from ...`語法 2. 使用全局方法`Vue.use( plugin )`使用插件,可以傳入一個選項對象 `Vue.use(MyPlugin, { someOption: true })` ## 八. 請列舉出3個Vue中常用的生命周期鉤子函數? 1. ***created***: 實例已經創建完成之后調用,在這一步,實例已經完成數據觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段還沒有開始, `$el`屬性目前還不可見。 2. ***mounted***: el被新創建的 `vm.$el` 替換，并掛載到實例上去之后調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 `vm.$el` 也在文檔內。 3. ***activated***::`keep-alive`組件激活時調用。 ## 九. 請簡述下Vuex的原理和使用方法  數據單向流動 一個應用可以看作是由上面三部分組成: ***View, Actions,State***,數據的流動也是從**View => Actions => State =>View** 以此達到數據的單向流動。 但是項目較大的, 組件嵌套過多的時候, 多組件共享同一個State會在數據傳遞時出現很多問題.Vuex就是為了解決這些問題而產生的。 Vuex可以被看作項目中所有組件的數據中心,我們將所有組件中共享的State抽離出來,任何組件都可以訪問和操作我們的數據中心。 Vuex的組成：一個實例化的`Vuex.Store`由**state**, **mutations**和**actions**三個屬性組成: * state中保存著共有數據 * 改變state中的數據有且只有通過**mutations**中的方法,且**mutations**中的方法必須是同步的。 * 如果要寫異步的方法,需要些在**actions**中, 并通過**commit**到**mutations**中進行state中數據的更改.