1.了解vue和react吗？介绍一下。
vue和react都是主流的框架。
vue : 脚手架vue-cli、路由vue-router、状态管理工具vue-vuex。
react : 脚手架react-cli、路由react-router、状态管理工具react-redux。
二者区别：
1、生命周期不同。
2、模板和JSX。写法不同，react：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写；Vue.js 使用了基于 HTML 的模版语法。
3、状态管理机制不同。vuex redux
2.说一下vue动态路由。
而能传递参数的路由模式，由于可以传递参数，所以其对应的路由数量是不确定的，故称之为 动态路由。那么动态路由如何传递参数？
路由传参： path: '/detail/:id',
<router-link :to ="{params :{id:1}}" > <div>首页</div> </router-link>
如何把参数读取出来？路由参数是被设置到 this.$route.params 中的，想取到这个值，用 this.$route.params.id 就可以了。
3.vue双向绑定，以及原理。 (vue的响应式原理)
v-model : Object.defineProperty()
它可以允许我们对象设定getter、setter、从而可以劫持用户对对象属性的取值和赋值。
4.了解vuex吗？详细描述下。
它是vue的状态管理工具。
state：存储数据的状态
mutation: 存储数据状态的同步方法
action: 存储数据的异步方法
module: 模块的管理
5.vue store 的特点。
store存储的数据和方法是全局的，在任一组件和页面中都能调用。
6.你了解的vue指令有哪些？
v-model ：双向绑定
v-bind:单向绑定
v-on: 时间绑定 可以缩写为@
v-show ：显示隐藏
v-if ：条件渲染
v-for ：遍历（列表渲染）
7.vue生命周期
Vue 实例从创建到销毁的过程，就是生命周期。
也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。
beforeCreate ， created ， beforeMount ，mounted ，beforeUpdate，updated，activated，deactivated，beforeDestroy，destroyed
8.MVVM框架是什么？
MVVM是Model-View-ViewModel的缩写
Model代表数据模型，负责业务逻辑和数据封装
View代表UI组件，负责界面和显示
ViewModel监听模型数据的改变和控制视图行为，处理用户交互，简单来说就是通过双向数据绑定把View层和Model层连接起来。
在MVVM架构下，View和Model没有直接联系，而是通过ViewModel进行交互，我们只关注业务逻辑，不需要手动操作DOM，不需要关注View和Model的同步工作。
9.如何利用webpack把代码上传服务器以及转码测试？
可以使用gulp +webpack来实现。
10.webpack 和 gulp的对比， webpack打包文件太大怎么办?
1、Gulp侧重于前端开发的整个过程 的控制管理（像是流水线）；Webpack有人也称之为模块打包机
2、可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存 几个方面着手优化。
11.webpack怎么引入第三方的库？
首先，配置一个entry入口文件，然后new 一个 HtmlWebpaekPlugin，通过script标签把第三方库引入进来
12.vue slot是做什么的?
插槽。如果想在组件中添加内容，可以设置插槽。
插槽 分为 无名插槽和有名插槽。
13.vue和angular的优缺点以及适用场合？
vue
优点： 1. 简单：官方文档很清晰，比 Angular 简单易学。
2. 快速：异步批处理方式更新 DOM。
3. 组合：用解耦的、可复用的组件组合你的应用程序。
4. 紧凑：~18kb min+gzip，且无依赖。
5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。
缺点：
1. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
2. 不支持IE8
3. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
应用场景：小型应用
angularJS：
优点：
1. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
2. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。味着他有一个坚实的基础和社区支持。
3. 模板功能强大丰富，自带了极其丰富的angular指令。
4. 自定义指令，自定义指令后可以在项目中多次使用。
5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。
缺点：
1. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
2. angular 入门很容易 但深入后概念很多, 学习中较难理解
3. DI 依赖注入 如果代码压缩需要显示声明.
4. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
5. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作
应用场景：在大型超大型web应用开发上。
React
优点：
1.速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3.模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
4.单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
5.同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6.兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
缺点:
React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。
应用场景：个性化需求、中型应用
14.vue路由实现原理?
前端路由是直接找到与地址匹配的一个组件或对象，并将其渲染出来。
15.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？
根据vue-cli脚手架规范，一个js文件，一个CSS文件。
16.vue遇到的坑，如何解决的？
输入框抖动
加延时器防抖
17.vue的双向绑定的原理，和angular的对比？
Object.defineproperty()
通过设置对象属性的setter方法、getter方法来对对象取值和赋值
18.vue-cli，脚手架
1.nodemodules文件夹：模块包
2.packjson.js 配置文件
3.app.vue 主页面
4.main.js 入口文件
5.router.js配置路由
7.store.js配置数据状态管理
8.src文件夹：view页面、components组件、store（数据的状态、同步、异步方法）
19.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
换成a标签，或者通过点击事件js跳转
20.对于Vue是一套渐进式框架的理解
渐进式代表的含义是：主张最少。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
渐进式的含义，我的理解是：没有多做职责之外的事。
21.vue.js的两个核心是什么？
数据驱动和组件化。
22.请问v-if和v-show有什么区别？
相同点： 两者都是在判断DOM节点是否要显示。
不同点：
a.实现方式： v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。 v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。
b.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换；
c.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译； v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；
d.性能消耗：v-if有更高的切换消耗，不适合做频繁的切换； v-show有更高的初始渲染消耗，适合做频繁的额切换；
23.vue常用的修饰符
a、按键修饰符
如：.delete（捕获“删除”和”退格“键） 用法上和事件修饰符一样，挂载在v-on:后面，语法：v-on:keyup.xxx=’yyy’ <inputclass = 'aaa' v-model="inputValue" @keyup.delete="onKey"/>
b、系统修饰符
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器
.ctrl .alt .shift .meta
c、鼠标按钮修饰符
.left .right .middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。如：A 鼠标滚轮单击触发Click默认是鼠标左键单击
d、其他修饰符
.lazy
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步 ，我们可以添加lazy修饰符，从而转变为使用change事件进行同步：<inputv-model.lazy="msg" >
.number
如果想自动将用户的输入值转为数值类型，可以给v-model添加.number修饰符：<input v-model.number="age" type="number">
这通常很有用，因为即使在type="number"时，HTML 输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析，则会返回原始的值。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：<inputv-model.trim="msg">
同样前面都有空格加上.trim后 将前后空格都去掉了。
24.v-on可以监听多个方法吗？
可以
25.vue中key值的作用
使用key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，
否则vue只会替换其内部属性而不会触发过渡效果。
26.Vue 组件中 data 为什么必须是函数？
在new Vue()中，data是可以作为一个对象进行操作的，然而在component中，data只能以函数的形式存在，不能直接将对象赋值给它。
当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。
27.v-for 与 v-if 的优先级
v-for的优先级比v-if高。
28.说出至少 4 种 vue 当中的指令和它的用法
v-if(判断是否隐藏) v-for(把数据遍历出来) v-bind(绑定属性) v-model(实现双向绑定)
29.vue中子组件调用父组件的方法
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。
第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法。
30.vue中父组件调用子组件的方法
父组件利用ref属性操作子组件方法。
父：<child ref="childMethod"></child>
子：method: {test() {alert(1)}}
在父组件里调用test即 this.$refs.childMethod.test()
31.父组件给子组件传值：
1.父组件调用子组件的时候动态绑定属性 <parent :dataList='dataList'></parent>
2.子组件定义props接收动态绑定的属性props: ['dataList']
3.子组件使用数据
32.子组件主动获取父子间的属性和方法：
在子组件中使用this.$parent.属性/this.$parent.方法。
33.子组件给父组件传值：
一、使用ref属性
1.父组件调用子组件时绑定属性ref <parent :ref='parent'></parent>
2.在父组件中使用this.$refs.parent.属性/this.$refs.parent.方法
二、使用$emit方法
1.子组件调用this.$emit('方法名‘,传值)
2.父组件通过子组件绑定的'方法名'获取传值。
34.vue页面级组件之间传值
1.使用vue-router通过跳转链接带参数传参。
2.使用本地缓存localStorge。
3.使用vuex数据管理传值。
35.说说vue的动态组件。
多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。
主要考查面试这 component的 is属性。
36.keep-alive内置组件的作用
可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中
37.递归组件的用法
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。
首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。
38.怎么定义vue-router的动态路由？怎么获取传过来的值？
动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：
{path: '/details/:id',name: 'Details',components: Details}
访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。
当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数
this.$route.params.id
39.vue-router有哪几种路由守卫?
路由守卫为：
全局守卫：beforeEach
后置守卫：afterEach
全局解析守卫：beforeResolve
路由独享守卫：beforeEnter
40.$route和 $router的区别是什么？
$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
$route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。
41.vue-router响应路由参数的变化
(1)用watch 检测
(2)组件内导航钩子函数
42. vue-router 传参
(1)使用Params:
只能使用name，不能使用path
参数不会显示在路径上
浏览器强制刷新参数会被清空
（2）使用query：
参数会显示在路径上，刷新不会被清空
name 可以使用path路径
43.不用Vuex会带来什么问题？
1.可维护性会下降，你要想修改数据，你得维护三个地方
2.可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的
3.增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。
44.vuex有哪几种属性？
有五种，分别是 State、 Getter、Mutation 、Action、 Module。
45.vuex的State特性是？
1.Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data
2.state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
3.它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
46.vuex的Getter特性是？
1.getters 可以对State进行计算操作，它就是Store的计算属性
2. 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
3. 如果一个状态只在一个组件内使用，是可以不用getters
47.vuex的Mutation特性是？
1.Action 类似于 mutation，不同在于：
2.Action 提交的是 mutation，而不是直接变更状态。
3.Action 可以包含任意异步操作
48.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
1.如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
2.如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便。
49.promise是什么？
promise 是一个异步编程的解决方案，解决了之前异步回调层层嵌套的问题，promise提供了一个容器，内部编写异步代码，将异步结果通过resolve方法暴露，实例对象下调用then方法指定结果处理函数。
new Promise( function (resolve, reject) {
// 一段耗时的异步操作 resolve('成功') // 数据处理完成
// reject('失败') // 数据处理出错
}
).then( (res) => {console.log(res)}, // 成功
(err) => {console.log(err)} // 失败)
网友评论