Vue十五個(gè)常見(jiàn)面試題（一）

1. 父子組件之間如何傳值？

父?jìng)髯樱和ㄟ^(guò)props進(jìn)行傳值

①傳遞靜態(tài)值

//父組件
<template>
  <div id="app">
    <child message="hello"></child>  
  </div>
</template>

<script>
  import child from './components/Child'
  export default {
    name: "app",
    components:{
     child
    }
  }
</script>

//子組件
<template>
  <div>
      <h2>{{message}}</h2>
  </div>
</template>

<script>
  export default {
    props: ["message"]    //使用props接受父組件的值
  }
</script>

②傳遞動(dòng)態(tài)值：把上述父組件修改成如下即可。

//父組件
<template>
  <div id="app">
    <child :message="parentMsg"></child>
  </div>
</template>

<script>
  import child from './components/Child'
  export default {
    name: "app",
    data() {
      return {
        parentMsg:'hello,world!'
      }
    },
    components: {
      child
    }
  }
</script>

子傳父：通過(guò)$emit來(lái)調(diào)用父組件的方法并傳遞數(shù)據(jù)

//子組件
<template>
  <div>
      <button @click="sendMsgToParent">向父組件傳值</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMsgToParent:function () {
        this.$emit("childMsg","hello world!");
      }
    }
  }
</script>

//父組件
<template>
  <div id="app">
    //@childMsg 與子組件中this.$emit("childMsg","hello world!")起的名字一致
    <child @childMsg="showChildMsg"></child>
  </div>
</template>

<script>
  import child from './components/Child'
  export default {
    name: "app",
    components: {
      child
    },
    methods:{
      showChildMsg:function (data) {
        console.log(data);
      }
    }
  }
</script>

2. 父子組件之間如何相互使用對(duì)方的方法與屬性？

父組件調(diào)用子組件：$children和$refs

  • 使用$children：返回的是一個(gè)數(shù)組類型，它包含所有子組件對(duì)象。
  • 使用$refs：通過(guò)$children訪問(wèn)子組件時(shí)，是一個(gè)數(shù)組類型，訪問(wèn)其中的子組件必須通過(guò)索引值。當(dāng)子組件過(guò)多，我們需要拿到其中一個(gè)時(shí)，往往不能確定它的索引值，甚至還可能會(huì)發(fā)生變化。想明確獲取其中一個(gè)特定的組件，這個(gè)時(shí)候就可以使用$refs。

子組件調(diào)用父組件：$parent

整合示例如下：

//父組件
<template>
  <div id='parents'>
            <p>我是父組件
              <button @click="click1hanlde">獲取子組件1的數(shù)據(jù)與方法</button>
              <button @click="click2hanlde">獲取所有子組件的數(shù)據(jù)和方法</button></p>

              <children1 ref="children1"></children1>
              <children2 ref="children2"></children2>
  </div>
</template>
<script>
  import children1 from './children1.vue'
  import children2 from './children2.vue'
  export default {
    components:{
      children1, 
      children2
    },
    data() {
      return {
        ParentData:'AAA'
      };
    },
    methods:{
      click1hanlde(){
        console.log(this.$refs.children1.children_data)
        this.$refs.children1.children_fun();
      },
      click2hanlde(){
        for(let i=0;i<this.$children.length;i++){
          console.log(this.$children[i].children_data);
          this.$children[i].children_fun();
        }
      },
      showParentData(){
            console.log(this.ParentData)
      }
    }
  };
</script>

//子組件1
<template>
  <div id='children1'>
          <p>我是子組件1: <button @click="getParent_fun">獲取父組件的數(shù)據(jù)和方法 </button></p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        children_data:'children_data1',
      };
    },
    methods:{
      children_fun(){
            console.log('我是子組件1的方法')
      },
      getParent_fun(){
        this.$parent.showParentData();
      }
    }
  };
</script>

//子組件2
<template>
  <div id='children2'>
          <p>我是子組件2</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        children_data:'children_data2',
      };
    },
    methods:{
      children_fun(){
            console.log('我是子組件2的方法')
      }
    }
  };
</script>

注意：不會(huì)存在多個(gè)父組件共用一個(gè)子組件的情況。如果多個(gè)父組件引用相同子組件的話，實(shí)際上是每個(gè)父組件下都實(shí)例化了一個(gè)相同的子組件。

3. 爺孫組件之間如何通信？

爺孫組件是沒(méi)有辦法直接通信的，但是它們可以分解為兩個(gè)父子組件通信，即爺爺和父親看成是一個(gè)父子組件, 而父親和孫子看成是一個(gè)父子組件。這樣它們之間就可以進(jìn)行通信了。

4. 兄弟組件之間如何通信？

  1. 使用Vuex

關(guān)于Vuex的具體使用，可見(jiàn)文章Vuex 使用詳解 。

  1. 創(chuàng)建一個(gè)事件總線（eventbus）：使用$on和$emit進(jìn)行傳值

因?yàn)?code>$on和$emit的事件必須是在一個(gè)公共的實(shí)例上才能觸發(fā)。那么新建一個(gè)Vue 實(shí)例當(dāng)作事件總線，達(dá)到兄弟組件之間如何通信的目的：

首先新建一個(gè)eventBus.js：

import Vue from 'vue'
export default new Vue()

component1.vue 里監(jiān)聽(tīng)事件：

import eventBus from './eventBus'

created () {
  eventBus.$on('my-event', args => {

  }) 
}

component2.vue 中觸發(fā)事件：

import eventBus from './eventBus'

watch: {
  list(newValue, oldValue) {
    eventBus.$emit('my-event', newValue)
  }
}

5. Axios是什么，描述使用它實(shí)現(xiàn)登錄功能的流程。

  1. Axios是一個(gè)基于ES6 Promise的HTTP 庫(kù)，支持Promise所有的API
  2. 它可以攔截請(qǐng)求和響應(yīng)
  3. 它可以轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)，并對(duì)響應(yīng)回來(lái)的內(nèi)容自動(dòng)轉(zhuǎn)換成JSON 類型的數(shù)據(jù)
  4. 安全性更高，客戶端支持防御XSRF

實(shí)現(xiàn)登錄流程：

  1. 第一次登錄的時(shí)候，前端調(diào)后端的登陸接口，使用axios發(fā)送用戶名和密碼
  1. 后端收到請(qǐng)求，驗(yàn)證用戶名和密碼，驗(yàn)證成功，就給前端返回一個(gè)token
  1. 前端拿到token，將token存儲(chǔ)到localStorage中，并跳轉(zhuǎn)路由頁(yè)面

然后進(jìn)行完善：

  1. 前端每次跳轉(zhuǎn)路由，都要判斷localStroage中有無(wú)token，沒(méi)有就跳轉(zhuǎn)到登錄頁(yè)面，有則跳轉(zhuǎn)到對(duì)應(yīng)路由頁(yè)面
  1. 后端拿到token后要進(jìn)行驗(yàn)證，驗(yàn)證成功就返回?cái)?shù)據(jù)，驗(yàn)證失?。ɡ纾簍oken過(guò)期）就返回401，請(qǐng)求頭中沒(méi)有token也返回401。
  1. 如果前端拿到狀態(tài)碼為401，就清除token信息并跳轉(zhuǎn)到登錄頁(yè)面

6. Vuex 是什么？怎么使用？哪種功能場(chǎng)景使用它？

Vuex 是一個(gè)專門為Vue 構(gòu)建的狀態(tài)集管理，為了解決組件間狀態(tài)共享的問(wèn)題。本質(zhì)上是存儲(chǔ)共享數(shù)據(jù)的倉(cāng)庫(kù)。
不是所有的項(xiàng)目都適合用Vuex，如果不是構(gòu)建大型項(xiàng)目，使用Vuex 反而使你的代碼繁瑣多余。

Vuex核心為：state、mutations、getters、actions、modules

Vuex 使用詳解

7.導(dǎo)航鉤子有哪些？它們有哪些參數(shù)？

導(dǎo)航鉤子（導(dǎo)航守衛(wèi)）：翻譯過(guò)來(lái)就是路由的生命周期函數(shù)，主要分為全局的鉤子函數(shù)和局部的鉤子函數(shù)。

  • 全局的鉤子函數(shù)

beforeEach：在路由切換開(kāi)始時(shí)調(diào)用
afterEach：在路由切換離開(kāi)時(shí)調(diào)用

  • 局部的鉤子函數(shù)

局部到單個(gè)路由：beforeEnter
組件的鉤子函數(shù):beforeRouterEnter、beforeRouterUpdate 、beforeRouterLeave

示例：

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import('../views/home/Home');
const Login = () => import('../views/category/Login');

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    name: '/home',
    component: Home
    // 局部到單個(gè)路由鉤子函數(shù)
    beforeEnter: function(){
    }
  },
  {
    path: '/login',
    name: '/login',
    component: Login
  }
];

const router = new VueRouter({
  routes:routes
});

// 路由全局鉤子函數(shù)
router.beforeEach((to,from,next)=>{
  // to：即將進(jìn)入的目標(biāo)對(duì)象
  // from：當(dāng)前導(dǎo)航要離開(kāi)的導(dǎo)航對(duì)象
  // next：是一個(gè)函數(shù)調(diào)用resolve 執(zhí)行下一步
})

8. 說(shuō)出4個(gè)Vue 當(dāng)中常用的指令和它的用法。

  • v-if：條件渲染指令，代表存在或者銷毀
  • v-bind：綁定指令，用來(lái)綁定屬性（語(yǔ)法糖是:）
  • v-on：監(jiān)視事件指令（語(yǔ)法糖是@）
  • v-for：循環(huán)指令
<ul>
  <li v-for="data in datalist">{{data}}</li>
</ul>

9. v-model是什么？Vue中標(biāo)簽怎么綁定事件？

Vue 利用v-model來(lái)進(jìn)行表單數(shù)據(jù)的雙向綁定，實(shí)際上，它做了兩個(gè)操作：利用v-bind，綁定一個(gè)value屬性；利用v-on把當(dāng)前元素綁定到一個(gè)事件上。

10. Vue 生命周期函數(shù)是哪些？（主要考察的是Vue 實(shí)例創(chuàng)建過(guò)程）

Vue 生命周期分為四個(gè)階段，8個(gè)函數(shù)。

  • 組件創(chuàng)建時(shí)（creating）：beforeCreate、created
  • 模板渲染時(shí)（mounting）：beforeMount、mounted
  • 數(shù)據(jù)更新時(shí)（updating）：beforeUpdate、updated
  • 組件銷毀時(shí)（destroying）：beforeDestroy、destroyed

后面題目見(jiàn) Vue十五個(gè)常見(jiàn)面試題（二）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容