前端常见面试题 - Vue篇

喵十一
157 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

以下会是vue常见面试题： 面试题将会以系列不定时更新，编写不宜，如有用到，请动动小手关注一下。

  1. Vue是什么 Vue 是一套用于构建用户界面的渐进式框架。

  2. MVVM 模式是什么 MVVM 是Model-View-ViewModel的简写。它本质上就是 MVC 的改进版。它本质上就是 MVC 的改进版。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

Model: 数据模型层

View: 视图层

ViewModel: 视图模型层

  1. 双向数据绑定的原理是什么 采用数据劫持 和 发布者-订阅者模式， 通过Object.defineProperty()方法劫持各属性的setter、getter，在数据发生改变时通知订阅者，并触发相应的监听回调

  2. Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式

  3. Vuex的原理是什么 vuex实现了一个单项数据流，在全局又有一个state存放数据， 当组建要更改state中的数据时，必须通过Mutation进行，mutation同时提供了订阅者模式供外部插件调用获 取state数据的更新。 而当所有异步操作（常见于调用后台接口异步获取更新数据）或批量的同步操作需要走Action， 但Action也是无法直接修改state的，还是需要通过mutation来修改state的数据。 最后根据state的变化，渲染到视图上。

  4. Vue-router 原理 vue-router通过hash与history两种方式实现前端路由。

更新视图但不重新请求页面是前端路由原理的核心之一。

  1. Vue的生命周期有哪些 beforeCreate : 开始创建

     data 和 methods 都未创建, 此处不能使用

created : 创建完毕

    data 和 methods 创建完毕, 最早的可以使用处

beforeMount : 开始挂载

    内存中已编译好所有内容, 准备显示到页面

mounted : 挂载完毕

    组件脱离创建阶段, 真正显示到页面上. 操作页面的DOM 最早可以在这里进行

beforeUpdate : 更新前

updated : 更新完毕

beforeDestory : 销毁前

destroyed : 销毁完毕

    data 和 methods 此处已消失, 无法使用 vue 获取数据在哪个周期函数

8. Vue获取数据应该在哪个生命周期 理论上, 应该在 created 周期中进行网络请求. 因为这是最早的的 methods 与 data 加载完毕的时机. 在 created 发送请求, 可以比 mounted 周期发送请求, 提前几毫秒的时间拿到数据. 而实际开发中, 几毫秒的提前对用户来讲, 没有任何差异. 所以 created 和 mounted 发送请求都可以。

  1. Vue的computed特性 计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。

  2. Vue的watch是否可以监听数组 可以监听到数组的增删和内部变化。

不可以监听到数组已有元素的值发生的变化。

  1. v-if 和 v-for 为什么不能在一起使用 因为v-for的优先级比v-if高，所以在渲染时即便条件不达成也会先渲染循环再进行判断，这样会造不成不必要的性能浪费

解决方案: 再外层嵌套template标签并再标签上判断

如果循环出现再内部则使用计算属性提前过滤掉不需要显示的项。

  1. 父组件和子组件哪个先完成挂载 子组件， 因为子组件不挂载完成父组件不可能挂在完成。

  2. 组件间传参的方式

  3. 父给自传

通过props

  1. 子给父传

自定义事件

  1. 兄弟间传参

事件车

avatar
文章
阅读
粉丝