Vue 常见面试题汇总（这些技巧你真的都掌握了吗

1、创建单页面应用的轻量级Web应用框架

2、简单易用

3、双向数据绑定

4、组件化的思想

5、虚拟DOM

6、数据驱动视图

7、前后端分离

缺点

1、Vue在开发多页应时不够灵活，需要配置多入口

2、不支持IE8

SPA的理解

SPA是 Single-Page-Application 的缩写，翻译过来就是单页应用。在WEB页面初始化时一同加载Html、Javascript、Css。一旦页面加载完成，SPA不会因为用户操作而进行页面重新加载或跳转，取而代之的是利用路由机制实现Html内容的变换。

优点

1、良好的用户体验，内容更改无需重载页面

2、SPA相对服务端压力更小

3、前后端职责分离，架构清晰

缺点

1、由于前端渲染，搜索引擎不会解析JS，只能抓取首页未渲染的模板，不利于SEO

2、单页面应用，在加载页面的时候将JavaScript、CSS统一加载，所以首次加载耗时更多

3、单页面应用需在一个页面显示所有的内容，默认不支持浏览器的前进后退（前端路由机制解决了该窘境，Hash模式中Hash变化会被浏览器记录，History模式利用 H5 新增的pushState和replaceState方法可改变浏览器历史记录栈）

MVVM的理解

MVVM是Model-View-ViewModel的缩写。Model 代表数据层，可定义修改数据、编写业务逻辑。View 代表视图层，负责将数据渲染成页面。ViewModel 负责监听数据层数据变化，控制视图层行为交互，简单讲，就是同步数据层和视图层的对象。ViewModel 通过双向绑定把 View 和 Model 层连接起来，且同步工作无需人为干涉，使开发人员只关注业务逻辑，无需频繁操作DOM，不需关注数据状态的同步问题。

具体细节参考文章

面试官：你了解MVVM框架吗？（Vue MVVM详细介绍，一看就会）_czjl6886的博客-CSDN博客随着前端的发展，MVVM思想越来越受到大家的欢迎，那么MVVM到底是什么呢？下面，我将简要介绍MVVM的思想，并从Vue的角度，分析具体代码中是怎么实现这种思想的。https://blog.csdn.net/czjl6886/article/details/121717212?spm=1001.2014.3001.5502

单向数据流的理解

我们经常说 Vue 的双向绑定，其实是在单向绑定的基础上给元素添加 input/change 事件，来动态修改视图。Vue 组件间传递数据仍然是单项的，即父组件传递到子组件。子组件内部可以定义依赖 props 中的值，但无权修改父组件传递的数据，这样做防止子组件意外变更父组件的状态，导致应用数据流向难以理解。

如果在子组件内部直接更改prop，会遇到警告处理。

以下为2种定义依赖props中的值

1、通过 data 定义属性并将 prop 作为初始值

2、 用 computed 计算属性去定义依赖 prop 的值

//子组件

2、@hook

// 父组件

<Child @hook:mounted=“doSomething”/>

//子组件

组件通信方式

父子组件

1、props、$emit

2、$parent、$children

跨级组件

1、$attrs、$listeners

2、provide、inject

父子、跨级、兄弟

1、EventBus（事件总线）

2、Vuex（状态管理）

扩展

1、缓存

2、路由

具体细节参考文章

Vue组件间的通信方式（多种场景，通俗易懂，建议收藏）_前端不释卷leo的博客-CSDN博客_vue组件间通信以下是我在工作中用到过的vue组件之间的通信方式，不同的场景使用不同的方式，基本满足所有开发场景中的通信需求，话不多说直接开始，满满的干货，建议收藏。1、父子组件之间的通信父 >>> 子 （Props）一个组件里面引入另外一个组件，此时构成了一种“父子关系”，当前组件为“父”，引入的组件为“子”，如当前组件（父），在父组件中通过 “:message” 向子组件通信。 <div class="paren…https://blog.csdn.net/qq_41809113/article/details/120384336?spm=1001.2014.3001.5502

v-on监听多个方法

鼠标进来1

常用修饰符

表单修饰符

1、lazy:：失去焦点后同步信息

2、trim：自动过滤首尾空格

3、number：输入值转为数值类型

事件修饰符

1、stop：阻止冒泡（js中stopPropagation）

2、prevent：阻止默认行为（js中preventDefault）

3、self：仅绑定元素自身触发

4、once：只触发一次

class、style的动态绑定方式

对象方式