前端面試必問題答疑（2）

一，css部分

1，簡單介紹下css權重優先級：

默認樣式<標籤選擇器<類選擇器<id選擇器<行內樣式<!important
      0         1        10      100    1000    1000以上
    繼承的權重爲0  (字體的css會繼承自父類標籤元素)
    權重會疊加     (div.box  權重:1+10=11)  (div #box  權重:1+100=101) 
    相同權重的選擇器，後邊的代碼會覆蓋前面的

2，實現一個不知道寬高的盒子水平垂直居中，有哪幾種實現方式：

a) 使用CSS方法：
    父盒子設置：display:table-cell;text-align:center;vertical-align:middle;
    子盒子設置：display:inline-block;vertical-align:middle;
    代碼實現：=>
        .father{
            width:300px;
            height:300px;
            display:table-cell;
            text-align:center;
            vertical-align:center;
        }
        .son{
            background:red;
            display:inline-block;
            vertical-align:middle;
        }
        
    b) 使用CSS3 transform:
    父盒子設置：position:relative;
    子盒子設置：position:absolute;left:50%;top:50%;transform：transform(-50%,-50%);
    代碼實現：=>
        .father{
            width:300px;
            height:300px;
            position:relative;
        }
        .son{
            background:red;
            position:absolute;
            top:50%;
            left:50%;
            transform:transform(-50%,-50%);
        }
        
    c) 彈性盒子：
    父盒子設置：display:flex;justify-content:center;align-item:center;
    子盒子設置：空，不須要設置
    代碼實現：=>
        .father{
            width:300px;
            height:300px;
            display:flex;
            justify-content:center;
            align-item:center;
        }
        .son{
            background:red;
        }
        
    [參考]([https://zhuanlan.zhihu.com/p/27186791][1])

3，如何用css畫一個三角形：

代碼實現：=>
    #eg{
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom: 100px solid blue;
    }

二，JS部分：

1，請寫一段代碼將"2019-4-28"轉成"2019年4月28日"

代碼實現：=>
    let str = '2019-4-28';
    let year = str.split('-')[0];
    let month = str.split('-')[1];
    let date = str.split('-')[2];
    let str1 =year+"年"+month+"月"+date+"日";
    console.log(str1);

2，寫一段代碼將數組 ['a','b','c'] , 變成 ['c','b','a'] 。(可以使用js自帶方法，也能夠本身實現)

代碼實現：=>
    var arr=['a','b','c'];
    //var arr1=arr.sort();//正序
    var arr1=arr.reverse();//反序
    console.log(arr1);

三，Vue部分：

1，vue的生命週期鉤子函數有哪些？

answer:=>
        beforeCreate
        created
        beforeMount
        mounted
        beforeUpdate
        updated
        activated
        deactivated
        beforeDestroy
        destroyed
    [詳細]([https://www.cnblogs.com/xkloveme/p/7435271.html][2])

2，什麼是keep-alive？它有什麼做用？與他對應的鉤子函數是那些？

answer:=>
        是Vue的內置組件，能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM。
        對應的鉤子函數：
        activated
            類型：func
            觸發時機：keep-alive組件激活時使用；
        deactivated
            類型：func
            觸發時機：keep-alive組件停用時調用；

3，vue的事件修飾符是什麼，她能作什麼事？舉個栗子：在vue的click事件中，如何阻止事件傳播？

answer:=>
        事件修飾符處理了許多DOM事件的細節，讓咱們再也不須要花大量的時間去處理這些煩惱的事情，
        而能有更多的精力專一於程序的邏輯處理。在Vue中事件修飾符主要有：                
        .stop：等同於JavaScript中的event.stopPropagation()，防止事件冒泡
        .prevent：等同於JavaScript中的event.preventDefault()，防止執行預設的行爲
        （若是事件可取消，則取消該事件，而不中止事件的進一步傳播）
        .capture：與事件冒泡的方向相反，事件捕獲由外到內
        .self：只會觸發本身範圍內的事件，不包含子元素
        .once：只會觸發一次
    舉個栗子：=>
        .stop 防止事件冒泡
        冒泡事件：嵌套兩三層父子關係，而後全部都有點擊事件，點擊子節點，就會觸發從內至外  
        子節點-父節點的點擊事件

4，什麼是vue router路由導航守衛？工做中用過她嗎？經常使用她處理什麼問題？

導航守衛便是在路由跳轉的時候，根據vue-router提供的導航守衛主要用來經過跳轉或取消參數
    或查詢的改變並不會出觸發進入/離開的導航守衛
    
    路由跳轉前作一些驗證，好比登陸驗證，是網站中的廣泛需求。
    對此，vue-route 提供的 beforeRouteUpdate 能夠方便地實現導航守衛（navigation-guards）。

5，從路由/user跳轉到/home,有幾種方式？

1.router-link
    2.this.$router.push() (函數裏面調用)
    3.this.$router.replace() (用法同上,push)
    4.this.$router.go(n) ()
 [詳細介紹]([https://blog.csdn.net/jiandan1127/article/details/86170336][3])

6，什麼是vuex？他有什麼做用？如何改變store中的狀態（state）？

answer:=>
        vuex是一個專爲vue.js應用程序開發的狀態管理模式。vuex解決了組件之間同一狀態的共享問題。
        當咱們的應用遇到多個組件之間的共享問題時會須要
        狀態管理核心狀態管理有5個核心，分別是state、getter、mutation、action以及module。
    1.state
        state爲單一狀態樹，在state中須要定義咱們所須要管理的數組、對象、字符串等等，只有在這裏定義了，
        在vue.js的組件中才能獲取你定義的這個對象的狀態。
    2.簡單的 store 模式
    var store = { 
        debug: true, 
        state: { 
        message: 'Hello!' 
    }, 
    setMessageAction (newValue) {
         if (this.debug) 
         console.log('setMessageAction triggered with', newValue) 
         this.state.message = newValue 
     },
      clearMessageAction () { 
          if (this.debug) console.log('clearMessageAction triggered') this.state.message = '' 
      } 
     }
     
     全部 store 中 state 的改變，都放置在 store 自身的 action 中去管理。
     這種集中式狀態管理可以被更容易地理解哪一種類型的 mutation 將會發生，以及它們是如何被觸發。
     當錯誤出現時，咱們如今也會有一個 log 記錄 bug 以前發生了什麼。
     
     此外，每一個實例/組件仍然能夠擁有和管理本身的私有狀態：
     var vmA = new Vue({ 
         data: { 
         privateState: {}, 
         sharedState: store.state 
         } 
     }) 
     var vmB = new Vue({ 
         data: { 
         privateState: {}, 
         sharedState: store.state 
         } 
     })
     
     End!