常见的vue面试题

00一、v-show与v-if的区别
v-show:操做的是元素的display属性
v-if:操做的是元素的建立和插入
相比较而言v-show的性能要高

00二、methods、computed、watch三者的区别
methods是个方法，执行的时候须要事件进行触发
computed是一个计算属性，是实时响应的，只要data中的属性发生了变化那么就会触发computed，计算属 性是基于属性的依赖进行缓存的，methods调用的时候须要加()，而computed调用的时候是不须要加()
watch属性监听，watch用来监听属性的变化，当值发生变化的时候来执行特定的函数，watch监听属性的时候 会有2个参数newVal和oldVal一个新值一个旧值

00三、vue中自定义指令如何使用
Vue.directive():
参数1：指令名称
参数2：指令实现的函数，在回调函数中第一次参数是指令绑定的元素，参数二是一个对象其中对象中有value 属性表明的是表达式返回的结果，还有modifiers属性是指令的修饰符

00四、vue中组件建立的方式有哪些？
全局组件和局部组件
全局组件 Vue.component();参数1：组件名称  参数2：组件的配置项
局部组件 new Vue({    components:{} key值为组件名称  val值为组件的配置项 })

00五、vue中的过滤器如何使用
Vue.filter()
参数1：过滤器名称
参数2：过滤器实现的方法  该方法中有2个参数  参数1为须要过滤的数据，参数2为过滤器传递的参数

00六、如何实现父子组件传值、非父子组件传值
父组件传递子组件：    经过属性进行传递   接受用props属性进行接受。 props属性用来接收外部属性。    在父组件中当子组件看成标签使用的时候给子组件添加属性，值为须要传递的值。在子组件内部经过props 进行接受。接受的方式有2种，第一种为数组接受，第二种为对象接受，推荐用第二种，对象形式的能够限制数 据的类型
子组件传父组件    //方案一    在父组件中当子组件看成标签使用的时候给子组件绑定自定义方法，子组件经过this.$emit()进行触发。注意 自定义方法是不须要加()的        //方案二    利用solt插槽做用域。   
非父子组件传值    方案一：        建立公共的Vue对象。经过调用Vue中的$on() $emit()进行传值。须要接受值得一方调用$on,须要传递值 得一方调用$emit()
    方案二：        利用观察者模式封装$on $emit

00七、请说出vue中生命周期函数(钩子函数)
一、beforeCreate():组件实例刚刚被建立  (el和data并未初始化)
二、created():组件建立完成,属性已绑定,但DOM还未生成,$el属性还不存在 (完成data数据的初始化)
三、beforeMount():模板编译/挂载以前 (完成了el和data初始化)
四、Mounted():模板编译/挂载以后 (完成挂载)
五、beforeUpdate():组件更新以前
六、updated()：组件更新以后
七、beforedestroy():组件销毁以前
八、destroyed():组件销毁以后

00八、请解释一下vue的中单向数据流的理解
数据从父级组件传递给子组件,只能单向绑定，子组件不能直接修改从父级传递过来的数据
数据只能从一个方向来修改状态,若是父组件给N个子组件进行了数据传递。那么某一个子组件中修改了这个数 据，那么就会致使其余组件的数据也会发生改变。所以数据只能从一个方向来修改状态

00九、请说下什么是动态组件，如何使用，以及keep-alive的做用
动态组件：    让多个组件使用同一个挂载点，并动态进行切换。这就是动态组件
    经过保留<component></component> 元素，动态的绑定它的is特性，能够实现动态组件
keep-alive    包裹动态组件(组件)时，会缓存不活动的组件实例，而不是销毁它们
    组件切换调用的时候自己会被销毁掉的，只要加上keep-alive进行包裹，就不会被销毁，而是被缓存起来， 下一次使用的时候直接从缓存中调用

0十、请说下组件的生命周期有哪些？
activated && deactivated:
    activated：当组件为活跃状态的时候触发(活跃状态：进入页面的时候)
    deactivated：缓存状态的时候触发

0十一、vue中solt的使用方式，以及solt做用域插槽的用法
使用方式：    当组件当作标签进行使用的时候，用slot能够用来接受组件标签包裹的内容，当给solt标签添加name属性的 时候，能够调换响应的位置
插槽做用域：    做用域插槽其实就是带数据的插槽，父组件接收来自子组件的slot标签上经过v-bind绑定进而传递过来的数 据，父组件经过scope来进行接受子组件传递过来的数据

0十二、为何在组件内部data是一个函数而不是一个对象？
由于每次调用组件的时候都会从新生成一个对象,若是是一个对象的状况下，data数据会进行复用(由于对象是引 用数据类型),而当data是一个函数的时候每次调用的时候就会返回一个新的对象

01三、vue中动画如何实现
哪一个元素须要动画就给那个元素加transition标签
进入时class的类型分为如下几种    <name>-enter  <name>-enter-active  <name>-enter-to
离开时class的类型分为如下几种
    <name>-leave     <name>-leave-active    <name>-leave-to
若是须要一组元素发生动画须要用标签<transition-group><transition-group>

01四、浅谈对路由的理解
什么是路由？    根据不一样的url地址展现不一样的页面或者数据。
路由分为前端路由，和后端路由
前端路由：    一、前端路由多用于单页面开发，也就是SPA。
    二、前端路由是不涉及到服务器的，是前端利用hash或者HTM5的historyApi来实现的，通常用于不一样的内 容展现和切换

01五、路由跳转的方式有哪几种？
一、a标签进行跳转。例如<a href="#/home">首页<a>
二、router-link进行跳转  例如：<router-link to="/home">首页<router-link>
三、编程式路由   例如：this.$router.push()

01六、路由传值的方式有哪几种
一、path路径属性传值。例如：path:"/home/:id/name";  接受的时候经过 this.$route.params
二、query传值。由于在url中？后面的参数不会被解析，所以咱们能够经过query进行传值。 接受的时候经过 this.$route.query
三、路由解耦。在配置路由的时候添加props属性为true,在须要接受参数的组件页面经过props进行接受
四、编程式导航  this.$router.push({path:"/home",query:{}});

01七、请说出路由配置项经常使用的属性及做用
路由配置参数：    path : 跳转路径
    component : 路径相对于的组件
    name:命名路由
    children:子路由的配置参数(路由嵌套)
    props:路由解耦
    redirect : 重定向路由

01八、编程式导航使用的方法以及经常使用的方法
路由跳转 ： this.$router.push()
路由替换  : this.$router.replace()
后退： this.$router.back()
前进 ：this.$router.forward()

01九、如何重定向路由
经过配置路由项中的redirect进行重定向

020、如何实现路由解耦
在路由的配置项中设置props:true  在须要接受组件的内部经过props进行接受

02一、如何检测路由参数的变化
经过属性监听来实现或者beforeRouterUpdate()
watch:{    "$router"(){   
    } }
beforeRouterUpdate(to,from,next);

02二、什么是路由守卫？路由的钩子函数有哪些？分别说出使用的场景，及用法
一、什么是路由守卫？       路由跳转先后作的一些验证
二、路由常见的钩子函数 berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
使用的场景 beforeRouteEnter:当路由进入以前:登录验证、热力图的记录、
beforeRouteUpdate:当路由进行更新的时候。若是当前路由发生了变化，可是不须要组件的建立销毁的过程的 时候，就须要用到这个钩子函数
beforeRouterLeave:当路由离开的时候、当用户没有进行支付离开的时候、当用户填写完信息没有保存的时 候......

02三、什么是全局守卫
beforeEach:全局守卫。验证用户是否登录
router.beforeEach((to,from,next)=>{     //登录状态    let status = false;    //因此路由组建的name名字    const nextRouter = ["two","three","detail"];
    if(nextRouter.indexOf(to.name)>=0){              if(!status){                   router.push({name:"login"})                }else{                   next();                }     }else{              next();        } })

02四、axios与jquery的ajax有什么不一样
axios的优势：    一、从nodejs中建立http请求
    二、支持promiseAPI
    三、提供了一些并发请求的接口
    四、自动转换json数据
    五、客户端支持防止CSRF/XSRF
ajax的缺点：    一、jQuery项目庞大，单纯的使用ajax却要引入整个Jquery很是不合理
    二、基于原生的XHR开发，可是XHR架构并不清晰

02五、简述vuex的数据传递流程
当组件进行数据修改的时候咱们须要调用dispatch来触发actions里面的方法。actions里面的每一个方法中都会 有一个commit方法，当方法执行的时候会经过commit来触发mutations里面的方法进行数据的修改。 mutations里面的每一个函数都会有一个state参数，这样就能够在mutations里面进行state的数据修改 ，当数据修改完毕后，会传导给页面。页面的数据也会发生改变

02六、双向数据绑定的原理
vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法从新定义了对象获取属性值(get)和 设置属性值(set)的操做来实现的。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回 这个对象。

02七、使用vue的时候会一会儿加载全部的东西使得初始化页面很卡，该如何解决？ vue-router解决首次加载缓慢的问题。懒加载简单来讲就是按需加载。
像vue这种单页面应用，若是没有应用懒加载，运用webpack打包后的文件将会异常的大，形成进入首页时， 须要加载的内容过多，时间过长，会出现长时间的白屏，即便作了loading也是不利于用户体验，而运用懒加载 则能够将页面进行划分，须要的时候加载页面，能够有效的分担首页所承担的加载压力，减小首页加载用时。
用法：在配置路由时使用：component:resolve=>require([“@components/路由的路径”]，resolve)。 就是用了懒加载后打完包直接运行那个index.html会报错，报文件引用错误实际上是打包时候路径配置有点问 题，找到build下面的webpack.prod.conf.js   添加   publicPath："./",

02八、vue中的scoped
1. 在vue组件中，在style标签上添加scoped属性，以表示它的样式做用于当下的模块，很好的实现了样式私有 化的目的，这是一个很是好的机制。
2. scoped确定是解决了样式私有化的问题，但同时也引入了新的问题---样式不易（可）修改，而不少时候， 咱们是须要对公共组件的样式作微调的。因此我才说要谨慎使用 。 02九、vue路由传值params和query的区别
1.query传参和接收参数    传参: this.$router.push({ path:'/xxx' query:{ id:id } })
    接收参数: this.$route.query.id
注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！
2.params传参和接收参数    传参: this.$router.push({ name:'xxx' params:{ id:id } })         接收参数: this.$route.params.id
两者还有点区别，直白的来讲query至关于get请求，页面跳转的时候，能够在地址栏看到请求参数，而 params至关于post请求，参数不会再地址栏中显示

030、跨域的方式
一、jsonp
二、正向代理 用http-proxy-middleware模块 app.use("/api",proxy({
    target:"协议+域名",    changeOrigin:true }))
三、cors PHP中

03一、在Vue中使用插件的步骤 * 采用ES6的import ... from ...语法或CommonJSd的require()方法引入插件
* 使用全局方法Vue.use( plugin )使用插件,能够传入一个选项对象Vue.use(MyPlugin, { someOption: true })

03二、请列举出3个Vue中经常使用的生命周期钩子函数 * created: 实例已经建立完成以后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段尚未开始, $el属性目前还不可见
* mounted: el被新建立的 vm.$el 替换，并挂载到实例上去以后调用该钩子。若是 root 实例挂载了一个 文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
* activated: keep-alive组件激活时调用 03三、第一次页面加载会触发哪几个钩子 第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

03四、简单描述每一个周期具体适合哪些场景
* beforecreate : 能够在这加个loading事件，在加载实例时触发
* created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
* mounted : 挂载元素，获取到DOM节点
* updated : 若是对数据统一处理，在这里写上相应函数
* beforeDestroy : 能够作一个确认中止事件的确认框
* nextTick : 更新数据后当即操做dom

03五、Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
Vue路由在Android机上有问题，babel问题，安装babel polypill 插件解决。

03六、vuex有哪几种属性(modules)有五种，分别是 State、 Getter、Mutation 、Action、 Module* vuex的State特性 A、Vuex就是一个仓库，仓库里面放了不少对象。其中state就是数据源存放地，对应于通常Vue对象里面的 dataB、state里面存放的数据是响应式的，Vue组件从store中读取数据，如果store中的数据发生改变，依赖这个 数据的组件也会发生更新C、它经过mapState、mapGetters把全局的 state 和 getters 映射到当前组件的 computed 计算属性中* vuex的Getter特性 A、getters 能够对State进行计算操做，它就是Store的计算属性B、 虽然在组件内也能够作计算属性，可是getters 能够在多组件之间复用C、 若是一个状态只在一个组件内使用，是能够不用getters* vuex的Mutation特性 Action 相似于 mutation，不一样在于：Action 提交的是 mutation，而不是直接变动状态；Action 能够包 含任意异步操做。