web 前端培训 Vue 面试题分享

​

1 你对 Vue 的理解?

定义

vue 是一套构建用户界面的渐进式的自底向上增量开发 MVVM 框架，Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

优点

轻量级、高效率、上手快、简单易学、文档全面而简洁

目的

解决数据绑定问题；Vue.js 主要的目的是为了开发大型单页面应用；支持组件化，也就是可以把页面封装成为若干个组件，把组件进行拼装，这样是让页 面的复用性达到最高

核心思想

数据驱动、组件化

优势

1、组件化开发，使代码编写量大大减少，读者更加易于理解

2、对数据进行双向绑定

3、响应式

4、使用路由不会刷新页面

5、单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 dom， 这样大大加快了访问速度和提升用户体验

6、第三方 UI 组件库使用起来节省很多开发时间，从而提升开发效率_前端培训

2 Vue 数据双向绑定原理

双向绑定原理

vue 数据双向绑定是通过数据劫持结合发布者-订阅者模 式的方式来实现的

1、数据劫持

当我们访问或设置对象的属性的时候，都会触发 Object.defineProperty()函数来拦截（劫持），然后再返回（get)或设置（set）对象的属性的值，并且当数据发生改变的时候做出反应

2、发布者订阅者模式

其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知

3 Vue 和 jquery 之间的区别

Vue

是一个精简的 MVVM 框架。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。

jquery

是一个 js 库，通过操作 dom 元素进行从而进行数据的赋值

区别

jQuery

是使用选择器选取 DOM 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数据和界面是在一起的

vue

对数据进行操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，他们通过 Vue 对象这个 vm 实现相互的绑定

4 Vue 生命周期的理解

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期_前端视频。

beforeCreate

在实例初始化之后，数据观测 (data observer)和 event/watcher 事件配置之前被调用

created

在实例创建完成后被立即调用。在这一步，实例完成以下的配置：数据观测(data observer)属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子，如果 root 实例挂载了一 个文档内元素，当 mounted 被调用时 vm.$el 也在文档内

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器，该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子

activated

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用

deactivated

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用

5 Vue 中 Data 为什么是个函数

data 组件都是 Vue 的实例组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data 写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果

6 MVVM 和 MVC 的区别？

MVVM

MVVM 即 Model-View-ViewModel 的简写，即模型-视图-视图模型，模型（Model）指的是后端传递的数据，视图(View)指的是所看到的页面，视图模型(ViewModel)是 mvvm 模式的核心，它是连接 view 和 model 的桥梁

1、将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的 页面，实现的方式是：数据绑定

2、将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听，这两个方向都实现的，我们称之为数据的双向绑定

3、MVVM 实现的是业务逻辑组件的重用，使开发更高 效，结构更清晰，增加代码的复用性

MVC

MVC 是 Model-View- Controller 的简写。即模型-视图-控制器。M 和 V 指的意思和 MVVM 中的 M 和 V 意思一样。C 即 Controller 指的是页面业务逻辑，使用 MVC 的目的就是将 M 和 V 的代码分离。MVC 是单向通信。也就是 View 跟 Model，必须通过 Controller 来承上启下

文章来源于前端九重天

​