vue面试题汇总
一、MVVM的理解
MVVM是Model–View–Viewmodel的简称,是一种软件架构模式。
model代表数据模型,也可以在model中定义数据修改和操作的业务逻辑。
view代表UI组件,它负责将数据模型转化为UI展现出来。
viewmodel监听模型数据的改变和控制视图行为、处理用户交互。
在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,当数据发生变化,ViewModel能够将数据的这种变化,传到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。
二、vue生命周期
Vue实例从创建到销毁的过程,就是生命周期。大体分三个阶段:创建阶段、更新阶段、销毁阶段。
而这三个阶段又可细分为:创建前/创建后, 挂载前/挂载后,更新前/更新后,销毁前/销毁后。
另外还有activated 表示激活时,deactivated表示停用状态,errorCaptured出现错误时出现。
第一次加载完成会触发beforeCreate,created,beforeMount,mounted。
三、v-if和 v-show的异同
v-if和v-show都可以实现元素的显示和隐藏.
而v-if的true和false会控制这个元素节点的存在与否。进行节点的创建和销毁。
v-show的true和false使用display的值如block和none变化来控制元素的显示方式。
四、vue实现双向绑定的原理
vue实现双向绑定的原理是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。
<body>
<div >
<input type="text" name="" id="txt">
<p id="show"></p>
</div>
</body>
<script>
var obj= {}
Object.defineProperty(obj,'txt',{
get : function(){
return obj
},
set:function(newValue){
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup',function(e){
obj.txt = e.target.value
})
</script>
五、vue 常用指令
1.v-text 和v-html作用相近,都是更新元素的中的内容
2.v-show ,v-if,v-else-if,v-else
3.v-for 用来迭代渲染,达到循环的操作的目的,可以迭代数组,数组对象,对象或是数字。
4.v-on 是用来绑定事件的监听器,表达式可以是一个方法也可以是内联语句。
5.v-model 它可以实现在表单控件或者组件上创建双向绑定。
六、vuex的理解
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。用来管理全局变量。
vuex使用一个store对象管理应用的状态,一个store包括:state,getter,mutation,action四个属性
State:vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过 this.$store.state来获取我们定义的数据。
Mutation:mutations是操作
state`数据的方法的集合,比如对该数据的修改、增加、删除等等。
Action:由于直接在mutation
方法中进行异步操作,将会引起数据失效。所以提供了Actions来专门进行异步操作,最终提交mutation
方法。
Getter:可以对state中的成员加工后传递给外界。
Module:当项目庞大,状态非常多时,可以采用模块化管理模式。
七、父组件与子组件之间的传值
父组件向子组件传值:父组件发送的形式是以属性的形式绑定值到子组件身上,然后子组件用属性props接收
子组件向父组件传值:子组件用 e m i t ( ) 触 发 事 件 emit()触发事件 emit()触发事件emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据。
八、单页面应用和多页面应用区别及优缺点
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。
多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新。
单页面的优点:
用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小;前后端分离;页面效果会比较炫酷。
单页面缺点:
不利于seo;导航不可用,如果一定要导航需要自行实现前进、后退。初次加载时耗时多;页面复杂度提高很多。
九、vue常用的修饰符
.stop
- 调用event.stopPropagation()
,防止事件冒泡。.prevent
- 调用event.preventDefault()
,防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播)。.capture
- 添加事件侦听器时使用 capture 模式,与事件冒泡的方向相反,事件捕获由外到内。.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。.once
- 只触发一次回调。.left
只当点击鼠标左键时触发。.right
只当点击鼠标右键时触发。.middle
只当点击鼠标中键时触发。
十、vue中 keep-alive 组件的作用
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
十一、axios的作用
vue中的ajax,用于向后台发起请求
特点:
从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换json数据
客户端支持防御XSRF
promise:
一个对象用来传递异步操作的信息
promise的出现主要是解决地狱回调的问题,无需多次嵌套
本质:分离异步数据获取和业务
十二、vue路由的钩子函数
首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to,from,next:
to:route即将进入的目标路由对象,
from:route当前导航正要离开的路由
next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
十三、vue中 key 值的作用?
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。
十四、Vue中引入组件的步骤?
1.采用ES6的import ... from ...
语法或CommonJS的require()
方法引入组件
2.对组件进行注册,代码如下
注册Vue.component('my-component',{ template: '<div>A custom component!</div>'})
3.使用组件`