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

柔光的暖阳◎ 2022-11-15 11:58 313阅读 0赞

# 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（））