1.keep-alive的作用是什么?
<keep-alive>是Vue的內置組件，能夠緩存組件，防止重復渲染頁面，提高用戶體驗，同時可以很大程度上減少接口請求，減小服務器壓力。
比如： 有一個列表頁面和一個 詳情頁面，那么用戶就會經常執行打開詳情=> 返回列表=>打開詳情這樣的話 列表 和 詳情 都是一個頻率很高的頁面，那么 就可以對列表組件使用<keep-alive></keep-alive>進行緩存，這樣用戶每次 返回列表的時候，都能從緩存中快速渲染，而不是重新渲染。
1 // 被keepalive包含的組件會被緩存 2 <keep-alive> 3 <router-view /> 4 </keep-alive>
2.屬性
include 包含的組件會被緩存
exclude 排除不緩存的組件
2.為什么data是一個函數？
因為組件是需要復用，所有的組件實例都會復用data，如果data是一個對象，會影響到其他的組件，所以data要寫成函數（組件之間不會互相影響）
3.Vue組件通訊有哪些？
prop 和 emit
1.父向子 父組件把數據通過V-bind傳遞給子組件
1 <template> 2 <div> 3 //數據通過V-bind傳遞給子組件 4 <childrenCom :father-list="fatherList"></childrenCom> 5 </div> 6 </template> 7 8 <script> 9 import childrenCom from './child' 10 export default { 11 props: { 12 13 }, 14 data() { 15 return { 16 fatherList:['orange','apple','banana'] 17 }; 18 }, 19 20 components: { 21 childrenCom 22 }, 23 }; 24 </script> 25 26 <style scoped > 27 28 </style>
子組件通過prop 來接收父組件傳遞過來的值
1 <template> 2 <div> 3 <ul> 4 <li v-for="(item,index) in fatherLit" 5 :key="index"> 6 {{item}} 7 </li> 8 </ul> 9 </div> 10 </template> 11 12 <script> 13 export default { 14 props: { 15 fatherList:{ 16 type:Array, //類型 17 defult:[] //默認值 18 } 19 }, 20 }
2.子向父 子組件通過emit 把數據傳遞給父組件
1 <template> 2 <div> 3 <ul> 4 <li v-for="(item,index) in fatherList" 5 :key="index" 6 @click="tofather(item)" 7 > 8 {{item}} 9 </li> 10 </ul> 11 </div> 12 </template> 13 14 <script> 15 export default { 16 props: { 17 fatherList:{ 18 type:Array, 19 defult:[] 20 } 21 }, 22 23 methods: { 24 tofather(item){ 25 // 傳值給父組件 26 this.$emit('sendFruits',item) 27 } 28 }, 29 components: { 30 31 }, 32 }; 33 </script>
父組件通過一個自定義方法來接收子組件傳遞過來的值
1 <template> 2 <div> 3 <childrenCom :father-list="fatherList" @sendFruits="sonFruits"></childrenCom> 4 </div> 5 </template> 6 7 <script> 8 import childrenCom from './child' 9 export default { 10 props: { 11 12 }, 13 data() { 14 return { 15 fatherList:['orange','apple','banana'] 16 }; 17 }, 18 methods: { 19 sonFruits(item){ 20 console.log(item); 21 } 22 }, 23 24 components: { 25 childrenCom 26 }, 27 }; 28 </script> 29 30 <style scoped > 31 32 </style>
3.在父組件使用children訪問子組件，在子組件中使用parent訪問父組件
4.在父組件使用 ref 可以直接拿到子組件里面的方法
兄弟組件通信
1.在main.js 全局綁定EvenBus
1 import Vue from 'vue'; 2 Vue.prototype.$bus = new Vue
2.使用
1 <div @click="addCart">添加</div> 2 export default{ 3 methods: { 4 addCart(event){ 5 this.$bus.$emit('getTarget', event.target) 6 } 7 } 8 } 9 // 另一組件 10 export default{ 11 created(){ 12 this.$bus.$on('getTarget', target =>{ 13 console.log(target) 14 }) 15 } 16 }
通過 Vuex
Vuex 適用於 父子、隔代、兄弟組件通信 Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。
每一個 Vuex 應用的核心就是 store（倉庫）。“store” 基本上就是一個容器，它包含着你的應用中大部分的狀態 ( state )。
Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。
改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化。
4.請說下你對vue生命周期的理解
如下圖
5.什么是nextTick？
nextTick是在下一次DOM更新接觸之后再執行的回調。
當修改數據后，DOM並沒有更新，使用nextTick可以獲取更新后的DOM
簡單的理解是：當數據更新了，在dom中渲染后，自動執行該函數。
6.為什么在v-for中使用key？
v-for中加key可以減少渲染次數，提升渲染性能。
7.Vuex頁面刷新數據丟失怎么解決？
例如做電商項目購物車功能的時候，數據存放在vuex里，如果刷新頁面，store的state存放的數據就會全部清空。購物車里面的商品就全都重置，這個時候就要做數據持久化。
使用 vuex-persist 插件，它就是為 Vuex 持久化存儲而生的一個插件。不需要你手動存取 storage ，而是直接將狀態保存至 cookie 或者 localStorage 中
8.怎么動態添加對象的類型的值？
Vue 是不能檢測對象屬性的添加或刪除
1 data() { 2 return { 3 obj:{ 4 name:'Vue' 5 } 6 }; 7 }, 8 mounted() { 9 this.name = 'zs' // 不是響應式的 10 this.$set(this.obj,'name','lisi') //響應式 11 },
9.你在之前的Vue項目做過那些優化？
- v-if和v-show 區分場景使用
- computed 和 watch 區分場景使用
- v-for 遍歷必須加key，key最好是id值，且避免同時使用v-if
- 圖片懶加載
- 路由懶加載
- 第三方插件按需引入