vue生命周期相關的面試題

1.vue生命周期都有哪些？

image.png

  beforeCreate:function () {
            /*實例創建之前調用,表示Vue剛剛出生,data/methods都沒有初始化,不能訪問data和methods*/
        },
        created:function () {
            /*實例創建之后調用,data和methods已經初始化好了，此時還沒有開始編譯模板
            */
        },
        //這個階段完成后，vue會開始編譯模板，根據data中的數據生成html，但是還沒有渲染到頁面上，僅存在于內存中
        beforeMount:function () {
            /*頁面掛載之前調用,完成了模板的編譯,用編譯好的模板替換el屬性指向的dom對象中的內容，但是還沒有掛載到頁面上*/
        },
        mounted:function () {
            /*頁面掛載之后調用,此時可以操作dom元素*/
        },
        beforeUpdate:function(){
            /*數據更新之前調用，此時data中的值是最新的，頁面上的數據依然是舊的。
            *
            * */
        },
        //這個階段執行完后，虛擬dom會根據最新的數據生成最新的模板，然后替換之前的內容。
        updated:function () {
            /*數據更新完成之后調用，此時data中的數據和頁面上的數據都是最新的
           * */
        },
         beforeDestroy:function(){
            /*實例銷毀之前調用，一些實例的屬性和方法還是可以使用。
            * */
        },
        destroyed:function () {
            /*
            * 實例銷毀之后調用，此時所有的屬性和方法都不能使用。
            * */
}

2.進入頁面會執行哪些生命周期函數
beforeCreate、created、beforeMounted、mounted

3.在哪里可以訪問data
beforeCreate中不可以訪問
created中有el
beforeMounte中有el
mouted中都有，包括之后的生命周期鉤子函數都有

4、如果加入了keep-alive會增加兩個生命周期函數
activated和deactivated
進入頁面的時候觸發activated，離開頁面觸發 deactivated
5.如果加入keep-alive組件，第一次進入頁面會觸發哪些生命周期
beforeCreate、created、beforeMounted、mounted、activated
6、如果加入了keep-alive組件后，第二次或第n次進入頁面會觸發哪些生命周期？
只觸發一個生命周期：activated(因為該頁面已經被緩存起來了)

談談你對keep-alive組件的了解

1.是什么
vue自帶的一個組件，用來緩存組件，提升性能，keep-alive可以在組件切換時，保存其包裹組件的狀態，使其不被銷毀。
2、參數
include：表示只有匹配的組件才會被緩存；
exclude：表示匹配到的組件不會被緩存；
3、生命周期
有兩個生命周期函數，同上
4.使用場景
-列表頁面跳轉詳情頁的時候，用戶通過點擊跳轉，那么詳情頁每次都要去請求數據，如果用戶每次點擊的都是同一個，那么詳情頁就沒必要去重新請求，直接緩存起來就行了，如果點擊的不是同一個再重新發起請求；
-在router-view上使用可以緩存路由組件；

v-if和v-show的區別

1.相同點
都可以控制元素的顯示隱藏
2.區別
v-if通過創建/銷毀dom元素來控制元素的顯示隱藏，v-show通過css屬性的display:none來控制元素的顯示隱藏
3.場景
頻繁切換使用v-show，會節省性能，反之使用v-if

說一下vue組件中的name的作用

1、當項目使用keep-alive時，可搭配組件name進行緩存過濾
當我們使用keep-alive緩存組件時，被緩存組件中的mounted函數只會執行一次，第二次進入頁面不會重新觸發，有兩種解決方法，一種是使用activated()，在里面進行mounted中的操作；另一種就是在keep-alive中增加一個過濾，如下所示：

<div id="app"> 
 <keep-alive exclude="Home">
  <router-view/>
 </keep-alive>
</div>

exclude屬性就是要忽略匹配到的組件。
2、DOM做遞歸組件時；
當組件需要自己調用自己的時候

//父組件List.vue
<template>
  <div class="list">
    <Tree :list="list"/>
  </div>
</template>

<script>
import Tree from './Tree.vue';

export default {
  name: "List",
  components: {Tree},
  data() {
    return {
      list: [
        {
          title: "A",
          children: [
            {
              title: "A-A",
              children: [
                {
                  title: "A-A-A",
                },
              ],
            },
            {
              title: "A-B",
            },
          ],
        },
        {
          title: "B",
        },
        {
          title: "C",
        },
        {
          title: "D",
        },
      ],
    };
  },
};
</script>

//子組件Tree.vue

<template>
  <div class="tree">
    <div v-for="(item, index) of list" :key="index">
      <div>
        <span class="item-title-icon"></span>
        {{ item.title }}
      </div>
      <div v-if="item.children">
        <Tree :list="item.children" />  //遞歸組件是指組件自身調用自身
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tree",
  components: {},
  props: ["list"],
};
</script>

3、使用vue-tools時；
vue-devtools調試工具里顯示的組件名稱是由vue中組件name決定的

vue-tool.png

v-if和v-for的優先級

v-for的優先級比v-if的優先級高，這是在源碼中規定好的，并且v-for和v-if不可以同時使用，同時使用會很浪費性能，比如明知判斷條件是false的情況下，還需要去遍歷一下數據，所以通常我們會把v-if放在v-for的外面。

nextTick的原理是什么

是用來獲取更新后的dom內容，并且該方法是異步的

created() {
    console.log(111)
  },
  methods: {
    btn(){
      console.log(333)
      this.$nextTick(()=>{
        console.log(222)
      })
    },
  },

image.png

作用是將回調函數延遲到下次dom更新循環之后執行因為vue更新數據是異步的，修改data中的數據，視圖不會立刻更新，vue會將你對data的修改放到一個watch隊列中，當同一事件循環中的所有數據更新完以后，再進行試圖更新，所以會產生延遲。
最常見的使用場景就是，在created中獲取dom元素的時候需要使用$nextTick獲取

組件中的data為什么必須是一個函數？

組件中的data寫成一個函數，數據以函數返回值形式定義，這樣每復用一次組件，就會返回一份新的data，相當于給每個組件實例創建一個私有的數據空間，讓各個組件實例維護各自的數據。而單純的寫成對象形式，就使得所有組件實例共用了一份data，就會造成一個變了全都會變的結果。

怎么理解vue中的單向數據流？

當父組件給子組件傳遞數據的時候，子組件只允許對數據進行讀取，不允許修改數據，因為當子組件修改了父組件傳過來的數據時，其他引用父組件數據的組件也會被修改，從而導致報錯，然而也不知道是當前組件報錯還是父組件報錯還是修改父組件信息的子組件的錯誤；

如果要修改可以通過this.$emit方法派發自定義事件，在父組件中修改；

vue路由有幾種模式？

hash模式和history模式，默認是hash模式
區別如下：
1、表現形式不同，hash使用#表示，history用/表示；
2、hash值不會發送到服務端，history會發送到服務端 ，如果沒有匹配到對應的路由，需要配置對應的頁面；
3、獲取方式不同，hash值可以通過location.path獲取，history通過location.pathname獲取；
4、hash可以通過window.onhashchange監聽hash值的改變 ，history
可以通過onpopstate監聽變化；

談一談對數據雙向綁定的原理？

實現一個簡單的數據雙向綁定，說一下基本的思路

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>實現一個簡單的雙向數據綁定</title>
</head>
<body>
    //在輸入框中輸入內容會同步到p標簽中
    <input type="text" id="ipt" value="">
    <p class="pp"></p>
</body>
<script>
    const ipt=document.querySelector('#ipt'),
          pp=document.querySelector('.pp');
    let obj={
        name:''
    };
    Object.defineProperty(obj,'name',{
        get(){
            console.log('get')
        },
        set(newVal){
            pp.innerHTML=newVal;
        }
    })
    ipt.addEventListener('keyup',function(e){
        obj.name=e.target.value;
    })

</script>
</html>

vue的渲染流程

組建中的template標簽會編譯為render函數，通過render函數創建出dom元素，然后轉化為虛擬dom最終轉化為真實dom

虛擬dom是什么？在vue中做了什么？是如何提升渲染效率的？

1、虛擬dom是一個js對象，用對象屬性來描述節點，是一層對真實dom的抽象

<ul class="ul">
    <li></li>
</ul>
//轉化為虛擬dom
{
  ele:'ul'  //目標元素 必需
  attr:'ul'  //屬性
  children:[]  //子元素
}

2、因為dom的執行速度遠不如js執行速度快，因此將真實的dom抽象成js對象，然后通過算法計算出真正需要更新的節點，從而減少了大量的dom操作。
3、將直接操作dom轉換成了兩個js對象中去比較，找出差異項，做局部更新，提高了執行效率。

未完待續...