Vue面试题整理——持续更新中

vue面试题系列（持续更细ing。。。）

一、vue组件注册

组件注册有2种注册方式：全局注册、局部注册。

（1）全局注册:使用Vue.component（'组件名称',{  /*  组件内容 ----template */   }），注册之后可以在任一组件中使用

（2）局部注册：1、定义子组件-》2、引入子组件-》3、在components：{}中挂载子组件-》4、在父组件的template中使用子组件

二、vue中组件间通信的方式

1、父子组件

（1）父组件-》子组件传值通信：通过props传值：先在父组件绑定自定义属性，在子组件使用props接受父组件传递的参数，然后在子组件中任意使用参数。

（2）子组件-》父组件传值通信：子组件使用this.$emit('自定义事件名称',参数)给父组件传值，父组件在HTML中使用v-on的方式触发事件，可以获取到传过来的参数。

2、兄弟组件

兄弟组件可以使用vuex、bus中央事件总线（$emit / $on）

（1）bus中央事件总线：以一个空的vue实例作为事件总线，以此来监听和触发事件，实现任何组件间的通信。具体实现方式如下：

var event = new Vue();

event.$emit('data-*',数据);

event.$on('data-*',data=>{});

3、跨级组件：vuex、bus中央事件总线（$emit / $on）

4、$attrs/$listeners 、$parent/$children与ref

三、vue的双向数据绑定原理（v-model原理）

vue中为表单的input事件中使用v-model指令绑定data中的属性，就可以创建数据的双向绑定，达到数据变化，视图更新，视图中由于交互操作用户输入的数据变化，data中的数据也会变化。vue是利用数据劫持 结合发布订阅者模式，通过Object.defineProperty()为这些属性添加setter/getter方法来劫持数据。另外设置一个监听器Observer，当监听到属性发生变化，就会通知订阅者watcher，watcher收到属性变化通知，就会去调用set方法进行data的更新，把数据更新到对应的节点，从而实现视图的更新。另一方面，通过编译和解析vue模板，为v-model指令对应的节点绑定@input事件，页面输入值就会被实时更新data中的值。             

四、vue的数据响应式原理

数据响应式是当data中的数据发生变化，视图就会响应地进行更新。具体是vue实例会遍历data中的每个对象的属性，并通过Object.defineProperty()为这些属性添加setter/getter方法来进行数据劫持。每个vue组件实例都会有一个watcher，它会把接触过的数据都自动作为依赖。当setter监听到数据被访问或被修改，就会通知watcher。当watcher收到通知以后，就会去调用set方法进行data的更新，把数据更新到对应的节点，从而实现视图的更新。

五、vue的MVVM模式（如何理解MVVM模式）

MVVM是一种设计思想，可以被拆分为M、V、VM部分。M指的是Model模型，是Vue中data对象部分，用来定义数据和业务逻辑；V指的是View视图层，用来展示页面内容；VM指的是VIewModel，是连接View和Model的中间件，可以监听到Model中的数据并且控制视图的更新，处理用户操作。View和Model并无直接联系。Model和ViewModel之间是双向绑定的。当Model中的数据发生变化，ViewModel会获取到Model最新的值，View会自动渲染更新。当View中因为用户在交互操作中输入不同的值，ViewModel也会通知Model更新data中的值。这种设计模式封装了大部分的dom操作，程序员只需要关注和维护数据和业务逻辑，不需要手动操作dom，也提高了开发效率。

六、如何理解前端的组件化思想

根据页面的内容结构划分，页面每个独立的可视/可交互区域可视为一个组件，页面可以由多个组件构成。每个组件是由HTML、css和js整合而成的一个独立的完成的功能，可以被重复使用。组件化实现了扩展HTML元素，封装可用的代码，方便维护。

七、前端的模块化（如何理解前端的模块化）

模块化是一种开发规范，模块就是将一个完整的单一的功能整合起来形成一个文件，可以向外部暴露方法。

模块化的好处：避免命名冲突、提高复用性、方便维护；

八、vue的优点（使用vue有什么优势/好处）

1、vue是一个轻量级的渐进式框架，压缩之后体积只有20kb

2、简单易用，上手快

3、提供了双向数据绑定和组件化视图

4、减少了dom操作，核心放在了视图层，用户只需关注数据和业务逻辑的处理，倡导数据驱动视图，通过数据来显示视图层。

九、路由跳转方式

声明式跳转（router-link标签）、编程式跳转（router.push（））

十、v-if、v-show的区别，以及它们的应用场景

共同点：都是控制元素的显示与隐藏，实现条件渲染。

区别：1、v-if是条件表达式的返回值为true时才会被渲染在dom中，如果为false，则不会被渲染在dom中。而v-show是始终都会被渲染在dom中，只是简单的控制元素的display属性。

           2、v-if有更高的切换开销，初次渲染开销较小。v-show有更高的初次渲染开销，切换开销较小。

应用场景：如果切换频次过高的，选择v-show。如果运行时条件很少改变的选择v-if。

十一、vue常见指令

v-text、v-html、v-for、v-if、v-show、v-once、v-on、v-bind、v-model

十二、为什么组件内部的data必须是一个函数？而new Vue()实例里data是一个对象

因为组件是拿来复用的，js对象又是引用关系，当data是函数时，因为每个组件实例可以维护一份被返回对象的独立的拷贝，这样组件之间的data属性值不会互相影响，隔离了作用域。

十三、vue中key的作用

1、使用key可以高效地更新虚拟dom，对比新旧nodes，识别vnodes。

2、方便跟踪每个节点的身份，从而重用和重新排序现有元素。

十四、vue的生命周期

每个组件都有自己的生命周期，生命周期是从创建、数据初始化、挂载、更新、到销毁的这个过程。

事件执行顺序为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

beforeCreated里获取不到$el、$data和data中的值

created里可以获取到$data和data中的数据，但是获取不到$el的值（还未被挂载）

mounted里可以获取到$el的值（已挂载到实例上，渲染完成，可以进行dom）

十五、watch、computed以及应用场景

watch：侦听器，监听数据，每当数据发生变化都会执行回调进行后续操作

computed：是计算属性，处理比较复杂的业务逻辑。依赖于其他属性值，基于响应式依赖来进行缓存。只有当它依赖的属性值发生变化，computed才会重新计算。如果依赖的属性值没有重新发生变化，多次访问计算属性会返回之前的结果，不会执行方法。

应用场景：如果是比较复杂的业务逻辑，需要依赖其他属性值来计算的就用computed。当需要在数据变化时执行异步方法或开销较大时就用watch。