乐趣区

Vue面试题合集

一. 请谈谈 Vue 中的 MVVM 模式
MVVM 全称是 Model-View-ViewModelVue 是以数据为驱动的,Vue 自身将 DOM 和数据进行绑定,一旦创建绑定,DOM 和数据将保持同步,每当数据发生变化,DOM 会跟着变化。ViewModel 是 Vue 的核心,它是 Vue 的一个实例。Vue 实例时作用域某个 HTML 元素上的这个 HTML 元素可以是 body,也可以是某个 id 所指代的元素。DOMListeners 和 DataBindings 是实现双向绑定的关键。DOMListeners 监听页面所有 View 层 DOM 元素的变化,当发生变化,Model 层的数据随之变化;DataBindings 监听 Model 层的数据,当数据发生变化,View 层的 DOM 元素随之变化。
二. v-show 和 v -if 指令的共同点和不同点?
v-show 指令是通过修改元素的 display CSS 属性让其显示或者隐藏
v-if 指令是直接销毁和重建 DOM 达到让元素显示和隐藏的效果
三. 如何让 CSS 只在当前组件中起作用?
将当前组件的 <style> 修改为 <style scoped>
四. <keep-alive></keep-alive> 的作用是什么?
<keep-alive></keep-alive> 包裹动态组件时,会缓存不活动的组件实例, 主要用于保留组件状态或避免重新渲染。大白话: 比如有一个列表和一个详情,那么用户就会经常执行打开详情 => 返回列表 => 打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用 <keep-alive></keep-alive> 进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染
五. Vue 中引入组件的步骤?
1. 采用 ES6 的 import … from … 语法或 CommonJS 的 require() 方法引入组件 2. 对组件进行注册, 代码如下
// 注册
Vue.component(‘my-component’, {
template: ‘<div>A custom component!</div>’
})

3. 使用组件 <my-component></my-component>
六. 指令 v -el 的作用是什么?
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标. 可以是 CSS 选择器,也可以是一个 HTMLElement 实例,
七. 在 Vue 中使用插件的步骤
采用 ES6 的 import … from … 语法或 CommonJSd 的 require() 方法引入插件使用全局方法 Vue.use( plugin) 使用插件, 可以传入一个选项对象 Vue.use(MyPlugin, { someOption: true})
八. 请列举出 3 个 Vue 中常用的生命周期钩子函数?
created: 实例已经创建完成之后调用, 在这一步, 实例已经完成数据观测, 属性和方法的运算, watch/event 事件回调. 然而, 挂载阶段还没有开始, $el 属性目前还不可见
mounted: el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
activated::keep-alive 组件激活时调用
九. 请简述下 Vuex 的原理和使用方法

一个应用可以看作是由上面三部分组成: View, Actions,State, 数据的流动也是从 View => Actions => State =>View 以此达到数据的单向流动. 但是项目较大的, 组件嵌套过多的时候, 多组件共享同一个 State 会在数据传递时出现很多问题.Vuex 就是为了解决这些问题而产生的.Vuex 可以被看作项目中所有组件的数据中心, 我们将所有组件中共享的 State 抽离出来, 任何组件都可以访问和操作我们的数据中心.

上图可以很好的说明 Vuex 的组成, 一个实例化的 Vuex.Store 由 state, mutations 和 actions 三个属性组成:

state 中保存着共有数据
改变 state 中的数据有且只有通过 mutations 中的方法, 且 mutations 中的方法必须是同步的
如果要写异步的方法, 需要些在 actions 中, 并通过 commit 到 mutations 中进行 state 中数据的更改.

更多 Vuex 信息, 请参考 Vuex 官网 : vuex.vuejs.org
十. 请谈谈 Vue 框架和 Angular.js 和 React 的不同
参见:Vue 对比其他框架

退出移动版