超硬核超全前端Vue2.0⾯试题（轻松了解框架）超硬核超全前端Vue2.0⾯试题（轻松了解框架）
1.vuex的作⽤？
vuex是⼀个专门为vue.js应⽤程序开发的状态管理模式
vuex可以帮助我们管理共享状态，也就是管理全局变量
vuex的⼏个核⼼概念：
vuex使⽤⼀个store对象管理应⽤的状态，⼀个store包括：state,getter，mutation,action四个属性
state:state意为'状态'，是vuex状态管理的数据源
getter:getter的作⽤与filters有⼀些相似，可以将state进⾏过滤后输出
mutation:mutation是vuex中改变state的唯⼀途径，并且只能同步操作
action:⼀些对state的异步操作可以放在action中，并通过在action提交mutaion变更状态
module：当store对象过于庞⼤时，可以根据具体的业务需求分为多个module
我们可以在组件中触发 Action，Action 则会提交 Mutation，Mutaion 会对 State 进⾏修改，组件再根据 State 、Getter 渲染页⾯2.vue中的路由的作⽤？
路由拦截，权限设置
例如：当⽤户没有登录权限的时候就会跳转到登录页⾯，⽤到的字段requireAuth:true
3.axios的作⽤？
vue中的ajax，⽤于向后台发起请求
特点：
从浏览器中创建XMLHttpRequests
从node.js创建http请求
⽀持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
⾃动转换json数据
客户端⽀持防御XSRF
promise：
⼀个对象⽤来传递异步操作的信息
promise的出现主要是解决地狱回调的问题，⽆需多次嵌套
本质：分离异步数据获取和业务
分为请求和响应
#请求
quest.use(function(config){
return config;
},function(error){
ject(error);
});
#响应
sponse.use(function(response){
return response;
},function(error){
ject(error);
});
4.列举vue的常见指令。
1.⽂本插值：{{}} Mustache
<div id='app'>
{{message}}
</div>
2.DOM属性绑定：v-bind
<div id='app-2'>
<span v-bind:title='message'>
⿏标悬停⼏秒钟查看此处动态绑定的提⽰信息
</span>
</div>
3.指令绑定⼀个事件：v-on
<div id='app-5'>
<p>{{message}}</p>
<button v-on:click='reverseMessage'>逆转消息</button>
</div>
4.实现表单输⼊和应⽤状态之间的双向绑定：v-model
<div id='app-6'>
<p>{{message}}</p>
<input v-model='message'>
</div>
5.控制切换⼀个元素的显⽰：v-if和v-else
<div id='app-3'>
<p v-if='seen'>现在你看到我了</p>
</div>
6.列表渲染:v-for
<div id='app-4'>
<ol>
<li v-for='todo in todos'>
{{}}
</li>
</ol>
5.列举Http请求中常见的请求⽅式？
get
向特定的路径资源发出请求，数据暴露在url中
post
向指定路径资源提交数据进⾏处理请求，数据包含在请求体中
options
返回服务器针对特定资源所⽀持的http请求⽅法，允许客户端查看，测试服务器性能
head
向服务器与get请求相⼀致的响应，响应体不会返回，可以不必传输整个响应内容
put
从客户端向服务器端传送的数据取代指定的⽂档的内容
delete
请求服务器删除指定的页⾯
trace
回显服务器收到的请求，主要⽤于测试或者诊断
connect
http/1.1协议中预留给能够将连接改为管道⽅式的代理服务
6.对于MVVM的理解
MVVM 是 Model-View-ViewModel 的缩写。
  Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
  View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
  ViewModel 监听模型数据的改变和控制视图⾏为、处理⽤户交互，简单理解就是⼀个同步View 和 Model的对象，连接Model和View。
  viewmodel和model实现双向数据绑定
前端页面模板
7.Vue的⽣命周期
1.什么是vue⽣命周期？
    答： Vue 实例从创建到销毁的过程，就是⽣命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等⼀系列过程，称之为 Vue 的⽣命周期。
  2.vue⽣命周期的作⽤是什么？
    答：它的⽣命周期中有多个事件钩⼦，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
  3.vue⽣命周期总共有⼏个阶段？
    答：它可以总共分为8个阶段：创建前/后, 载⼊前/后，更新前/后，销毁前/销毁后。
  4.第⼀次页⾯加载会触发哪⼏个钩⼦？
    答：会触发 下⾯这⼏个beforeCreate, created, beforeMount, mounted 。
  5.DOM 渲染在 哪个周期中就已经完成？
    答：DOM 渲染在 mounted 中就已经完成了。
8.Vue实现数据双向绑定的原理：Object.defineProperty（）
采⽤数据劫持结合发布者-订阅者模式的⽅式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。
9.Vue组件间的参数传递
1.⽗组件与⼦组件传值
    ⽗组件传给⼦组件：⼦组件通过props⽅法接受数据;
    ⼦组件传给⽗组件：$emit⽅法传递参数
  2.⾮⽗⼦组件间的数据传递，兄弟组件传值
    eventBus，就是创建⼀个事件中⼼，相当于中转站，可以⽤它来传递事件和接收事件。项⽬⽐较⼩时，⽤这个⽐较合适。（虽然也有不少⼈推荐直接⽤VUEX，具体来说看需求咯。技术只是⼿段，⽬的达到才是王道。）
10.Vue的路由实现：hash模式和 history模式
11.vue路由的钩⼦函数
⾸页可以控制导航跳转，beforeEach，afterEach等，⼀般⽤于页⾯title的修改。⼀些需要登录才能调整页⾯的重定向功能。
  beforeEach主要有3个参数to，from，next：
  to：route即将进⼊的⽬标路由对象，
  from：route当前导航正要离开的路由
  next：function⼀定要调⽤该⽅法resolve这个钩⼦。执⾏效果依赖next⽅法的调⽤参数。可以控制⽹页的跳转。
12.vue-cli如何新增⾃定义指令？
1.创建局部指令
var app =new Vue({
el:'#app',
data:{
},
// 创建指令(可以多个)
directives:{
// 指令名称
dir1:{
inserted(el){
// 指令中第⼀个参数是当前使⽤指令的DOM
console.log(el);
console.log(arguments);
// 对DOM进⾏操作
el.style.width ='200px';
el.style.height ='200px';
el.style.background ='#000';
}
}
}
})
Vue.directive('dir2',{
inserted(el){
console.log(el);
}
})
3.指令的使⽤
<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>
13.vue如何⾃定义⼀个过滤器？
html代码：
<div id="app">
<input type="text"v-model="msg"/>
{{msg| capitalize }}
</div>
JS代码：
var vm=new Vue({
el:"#app",
data:{
msg:''
},
filters:{
capitalize:function(value){
if(!value)return''
value = String()
return value.charAt(0).toUpperCase()+ value.slice(1)
}
}
})
全局定义过滤器
Vue.filter('capitalize',function(value){
if(!value)return''
value = String()
return value.charAt(0).toUpperCase()+ value.slice(1)
})
过滤器接收表达式的值 (msg) 作为第⼀个参数。capitalize 过滤器将会收到 msg的值作为第⼀个参数。
14.对keep-alive 的了解？
keep-alive是 Vue 内置的⼀个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加⼊了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级⼤于include) 。使⽤⽅法
<keep-alive include='include_components'exclude='exclude_components'>
<component>
<!-- 该组件是否缓存取决于include和exclude属性 -->
</component>
</keep-alive>
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。⼆者都可以⽤“，”分隔字符串、正则表达式、数组。当使⽤正则或者是数组时，要记得使⽤v-bind 。
使⽤⽰例
<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
<component></component>
</keep-alive>
<!-- 正则表达式 (需要使⽤ v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
<component></component>
</keep-alive>
<!-- Array (需要使⽤ v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
<component></component>
</keep-alive>
15.v-if 和 v-show 区别
答：v-if按照条件是否渲染，v-show是display的block或none；
16.vue⼏种常⽤的指令
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else
17.怎么定义 vue-router 的动态路由? 怎么获取传过来的值
答：在 router ⽬录下的 index.js ⽂件中，对 path 属性加上 /:id，使⽤ router 对象的 params.id 获取。
18.vue常⽤的修饰符？
答：.prevent: 提交事件不再重载页⾯；.stop: 阻⽌单击事件冒泡；.self: 当事件发⽣在该元素本⾝⽽不是⼦元素的时候会触发；.capture：事件侦听，事件发⽣的时候会调⽤
19.vue.js的两个核⼼是什么？
答：数据驱动、组件系统
20.vue中 key 值的作⽤？
答：当 Vue.js ⽤ v-for 正在更新已渲染过的元素列表时，它默认⽤“就地复⽤”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， ⽽是简单复⽤此处每个元素，并且确保它在特定索引下显⽰已被渲染过的每个元素。key的作⽤主要是为了⾼效的更新虚拟DOM。
21.描述下 vue 从初始化页⾯–修改数据–刷新页⾯ UI 的过程？
当 Vue 进⼊初始化阶段时，⼀⽅⾯ Vue 会遍历 data 中的属性，并⽤ Object.defineProperty 将它转化成 getter/setter 的形式，实现数据劫持(暂不谈 Vue3.0 的 Proxy)；另⼀⽅⾯，Vue 的指令编译器 Compiler 对元素节点的各个指令进⾏解析，初始化视图，并订阅 Watcher 来更新试图，此时 Watcher 会将⾃⼰添加到消息订阅器 Dep 中，此时初始化完毕。
当数据发⽣变化时，触发 Observer 中 setter ⽅法，⽴即调⽤ ify(),Dep 这个数组开始遍历所有的订阅者，并调⽤其 update ⽅法，Vue 内部再通过 diff 算法，patch 相应的更新完成对订阅者视图的改变。
22.既然 Vue 通过数据劫持可以精准探测数据变化，为什么还需要虚拟 DOM 进⾏ diff 检测差异?

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。