30道Vue面试题详解【文末送书】

---

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

• 加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

• 父组件更新过程

父 beforeUpdate -> 父 updated

• 销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

9、在哪个生命周期内调用异步请求？

---

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是本人推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

• 能更快获取到服务端数据，减少页面 loading 时间；

• ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

10、在什么阶段才能访问操作DOM？

---

在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。vue 具体的生命周期示意图可以参见如下，理解了整个生命周期各个阶段的操作，关于生命周期相关的面试题就难不倒你了。

11、父组件可以监听到子组件的生命周期吗？

---

比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：

// Parent.vue

<Child @mounted=“doSomething”/>

// Child.vue

mounted() {

this.$emit(“mounted”);

}

以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：

// Parent.vue

<Child @hook:mounted=“doSomething” >

doSomething() {

console.log(‘父组件监听到 mounted 钩子函数 …’);

},

// Child.vue

mounted(){

console.log(‘子组件触发 mounted 钩子函数 …’);

},

// 以上输出顺序为：

// 子组件触发 mounted 钩子函数 …

// 父组件监听到 mounted 钩子函数 …

当然 @hook 方法不仅仅是可以监听 mounted，其它的生命周期事件，例如：created，updated 等都可以监听。

12、谈谈你对 keep-alive 的了解？

---

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：

• 一般结合路由和动态组件一起使用，用于缓存组件；

• 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；

• 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

13、组件中 data 为什么是一个函数？

---

为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？

// data

data() {

return {

message: “子组件”,

childName:this.name

}

}

// new Vue

new Vue({

el: ‘#app’,

router,

template: ‘’,

components: {App}

})

因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

14、v-model 的原理？

---

我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；

• checkbox 和 radio 使用 checked 属性和 change 事件；

• select 字段将 value 作为 prop 并将 change 作为事件。

以 input 表单元素为例：

相当于

如果在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件，如下所示：

父组件：

子组件：

{ {value}}

props:{

value: String

},

methods: {

test1(){

this.$emit(‘input’, ‘小红’)

},

},

15、Vue 组件间通信有哪几种方式？

---

Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。

（1）props / $emit 适用 父子组件通信

这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

（2）ref 与 $parent / $children 适用 父子组件通信

• ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

• $parent/$children：访问父 / 子实例

（3）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）$attrs/$listeners 适用于 隔代组件通信

• a t t r s ： 包 含 了 父 作 用