vue插槽⾯试题_常见的vue⾯试题
001、v-show与v-if的区别
v-show：操作的是元素的display属性
v-if：操作的是元素的创建和插⼊
相⽐较⽽⾔v-show的性能要⾼
002、methods、computed、watch三者的区别
methods是个⽅法，执⾏的时候需要事件进⾏触发
computed是⼀个计算属性，是实时响应的，只要data中的属性发⽣了变化那么就会触发computed，计算属 性是基于属性的依赖进⾏缓存的，methods调⽤的时候需要加()，⽽computed调⽤的时候是不需要加()
watch属性监听，watch⽤来监听属性的变化，当值发⽣变化的时候来执⾏特定的函数，watch监听属性的时候 会有2个参数newVal和oldVal⼀个新值⼀个旧值
003、vue中⾃定义指令如何使⽤
Vue.directive():
参数1：指令名称
参数2：指令实现的函数，在回调函数中第⼀次参数是指令绑定的元素，参数⼆是⼀个对象其中对象中有value 属性代表的是表达式返回的结果，还有modifiers属性是指令的修饰符
004、vue中组件创建的⽅式有哪些？
全局组件和局部组件
全局组件 Vueponent()；参数1：组件名称  参数2：组件的配置项
局部组件 new Vue({    components:{} key值为组件名称  val值为组件的配置项 })
005、vue中的过滤器如何使⽤
Vue.filter()
参数1：过滤器名称
参数2：过滤器实现的⽅法  该⽅法中有2个参数  参数1为需要过滤的数据，参数2为过滤器传递的参数
006、如何实现⽗⼦组件传值、⾮⽗⼦组件传值
⽗组件传递⼦组件：    通过属性进⾏传递  接受⽤props属性进⾏接受。 props属性⽤来接收外部属性。    在⽗组件中当⼦组件当作标签使⽤的时候给⼦组件添加属性，值为需要传递的值。在⼦组件内部通过props 进⾏接受。接受的⽅式有2种，第⼀种为数组接受，第⼆种为对象接受，推荐⽤第⼆种，对象形式的可以限制数 据的类型
⼦组件传⽗组件    //⽅案⼀    在⽗组件中当⼦组件当作标签使⽤的时候给⼦组件绑定⾃定义⽅法，⼦组件通过this.$emit()进⾏触发。注意⾃定义⽅法是不需要加()的        //⽅案⼆    利⽤solt插槽作⽤域。
⾮⽗⼦组件传值    ⽅案⼀：        创建公共的Vue对象。通过调⽤Vue中的$on() $emit()进⾏传值。需要接受值得⼀⽅调⽤$on，需要传递值得⼀⽅调⽤$emit()
⽅案⼆：        利⽤观察者模式封装$on $emit
007、请说出vue中⽣命周期函数(钩⼦函数)
1、beforeCreate()：组件实例刚刚被创建  (el和data并未初始化)
2、created()：组件创建完成，属性已绑定，但DOM还未⽣成,$el属性还不存在 (完成data数据的初始化)
3、beforeMount()：模板编译/挂载之前 (完成了el和data初始化)
4、Mounted()：模板编译/挂载之后 (完成挂载)
5、beforeUpdate()：组件更新之前
6、updated()：组件更新之后
7、beforedestroy()：组件销毁之前
8、destroyed()：组件销毁之后
008、请解释⼀下vue的中单向数据流的理解
数据从⽗级组件传递给⼦组件，只能单向绑定，⼦组件不能直接修改从⽗级传递过来的数据
数据只能从⼀个⽅向来修改状态，如果⽗组件给N个⼦组件进⾏了数据传递。那么某⼀个⼦组件中修改了这个数 据，那么就会导致其他组件的数据也会发⽣改变。因此数据只能从⼀个⽅向来修改状态
009、请说下什么是动态组件，如何使⽤，以及keep-alive的作⽤
动态组件：    让多个组件使⽤同⼀个挂载点，并动态进⾏切换。这就是动态组件
通过保留 元素，动态的绑定它的is特性，可以实现动态组件
keep-alive    包裹动态组件(组件)时，会缓存不活动的组件实例，⽽不是销毁它们
组件切换调⽤的时候本⾝会被销毁掉的，只要加上keep-alive进⾏包裹，就不会被销毁，⽽是被缓存起来， 下⼀次使⽤的时候直接从缓存中调⽤
010、请说下组件的⽣命周期有哪些？
activated && deactivated:
activated：当组件为活跃状态的时候触发(活跃状态：进⼊页⾯的时候)
deactivated：缓存状态的时候触发
011、vue中solt的使⽤⽅式，以及solt作⽤域插槽的⽤法
使⽤⽅式：    当组件当做标签进⾏使⽤的时候，⽤slot可以⽤来接受组件标签包裹的内容，当给solt标签添加name属性的 时候，可以调换响应的位置
插槽作⽤域：    作⽤域插槽其实就是带数据的插槽，⽗组件接收来⾃⼦组件的slot标签上通过v-bind绑定进⽽传递过来的数 据，⽗组件通过scope来进⾏接受⼦组件传递过来的数据
012、为什么在组件内部data是⼀个函数⽽不是⼀个对象？
因为每次调⽤组件的时候都会重新⽣成⼀个对象，如果是⼀个对象的情况下，data数据会进⾏复⽤(因为对象是引 ⽤数据类型),⽽当data是⼀个函数的时候每次调⽤的时候就会返回⼀个新的对象
013、vue中动画如何实现
哪个元素需要动画就给那个元素加transition标签
进⼊时class的类型分为以下⼏种    -enter  -enter-active  -enter-to
离开时class的类型分为以下⼏种
-leave    -leave-active    -leave-to
如果需要⼀组元素发⽣动画需要⽤标签
014、浅谈对路由的理解
什么是路由？    根据不同的url地址展⽰不同的页⾯或者数据。
路由分为前端路由，和后端路由
前端路由：    1、前端路由多⽤于单页⾯开发，也就是SPA。
2、前端路由是不涉及到服务器的，是前端利⽤hash或者HTM5的historyApi来实现的，⼀般⽤于不同的内 容展⽰和切换
015、路由跳转的⽅式有哪⼏种？
1、a标签进⾏跳转。例如
2、router-link进⾏跳转  例如：⾸页
3、编程式路由  例如：this.$router.push()
016、路由传值的⽅式有哪⼏种
1、path路径属性传值。例如：path:"/home/:id/name";  接受的时候通过 this.$route.params
2、query传值。因为在url中？后⾯的参数不会被解析，因此我们可以通过query进⾏传值。 接受的时候通过 this.$route.query
3、路由解耦。在配置路由的时候添加props属性为true，在需要接受参数的组件页⾯通过props进⾏接受
4、编程式导航  this.$router.push({path:"/home",query:{}});
017、请说出路由配置项常⽤的属性及作⽤
路由配置参数：    path : 跳转路径
component : 路径相对于的组件
name：命名路由
children:⼦路由的配置参数(路由嵌套)
props：路由解耦
redirect : 重定向路由
018、编程式导航使⽤的⽅法以及常⽤的⽅法
路由跳转 ： this.$router.push()
路由替换  : this.$place()
后退： this.$router.back()
前进 ：this.$router.forward()
019、如何重定向路由
通过配置路由项中的redirect进⾏重定向
020、如何实现路由解耦
在路由的配置项中设置props:true  在需要接受组件的内部通过props进⾏接受
021、如何检测路由参数的变化
通过属性监听来实现或者beforeRouterUpdate()
watch:{    "$router"(){
} }
beforeRouterUpdate(to,from,next);
022、什么是路由守卫？路由的钩⼦函数有哪些？分别说出使⽤的场景，及⽤法
1、什么是路由守卫？      路由跳转前后做的⼀些验证
2、路由常见的钩⼦函数 berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
使⽤的场景 beforeRouteEnter：当路由进⼊之前：登陆验证、热⼒图的记录、
beforeRouteUpdate：当路由进⾏更新的时候。如果当前路由发⽣了变化，但是不需要组件的创建销毁的过程的 时候，就需要⽤到这个钩⼦函数
beforeRouterLeave：当路由离开的时候、当⽤户没有进⾏⽀付离开的时候、当⽤户填写完信息没有保存的时 候......
023、什么是全局守卫
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();        } })
024、axios与jquery的ajax有什么不同
axios的优点：    1、从nodejs中创建http请求
2、⽀持promiseAPI
3、提供了⼀些并发请求的接⼝
4、⾃动转换json数据
5、客户端⽀持防⽌CSRF/XSRF
ajax的缺点：    1、jQuery项⽬庞⼤，单纯的使⽤ajax却要引⼊整个Jquery⾮常不合理
2、基于原⽣的XHR开发，但是XHR架构并不清晰
025、简述vuex的数据传递流程
当组件进⾏数据修改的时候我们需要调⽤dispatch来触发actions⾥⾯的⽅法。actions⾥⾯的每个⽅法中都会 有⼀个commit⽅法，当⽅法执⾏的时候会通过commit来触发mutations⾥⾯的⽅法进⾏数据的修改。 mutations⾥⾯的每个函数都会有⼀个state参数，这样就可以在mutations⾥⾯进⾏state的数据修改 ，当数据修改完毕后，会传导给页⾯。页⾯的数据也会发⽣改变
026、双向数据绑定的原理
vue实现双向数据绑定的原理就是利⽤了 Object.defineProperty() 这个⽅法重新定义了对象获取属性值(get)和 设置属性值(set)的操作来实现的。
Object.defineProperty() ⽅法会直接在⼀个对象上定义⼀个新属性，或者修改⼀个对象的现有属性， 并返回 这个对象。
027、使⽤vue的时候会⼀下⼦加载所有的东西使得初始化页⾯很卡，该如何解决？ vue-router解决⾸次加载缓慢的问题。懒加载简单来说就是按需加载。
像vue这种单页⾯应⽤，如果没有应⽤懒加载，运⽤webpack打包后的⽂件将会异常的⼤，造成进⼊⾸页时， 需要加载的内容过多，时间过长，会出现长时间的⽩屏，即使做了loading也是不利于⽤户体验，⽽运⽤懒加载 则可以将页⾯进⾏划分，需要的时候加载页⾯，可以有效的分担⾸页所承担的加载压⼒，减少⾸页加载⽤时。
⽤法：在配置路由时使⽤：component:resolve=>require([“@components/路由的路径”]，resolve)。 就是⽤了懒加载后打完包直接运⾏那个index.html会报错，报⽂件引⽤错误其实是打包时候路径配置有点问 题，到build下⾯的f.js  添加  publicPath："./",
028、vue中的scoped
1. 在vue组件中，在style标签上添加scoped属性，以表⽰它的样式作⽤于当下的模块，很好的实现了样式私有 化的⽬的，这是⼀个⾮常好的机制。
jquery框架面试题
2. scoped肯定是解决了样式私有化的问题，但同时也引⼊了新的问题---样式不易(可)修改，⽽很多时候， 我们是需要对公共组件的样式做微调的。所以我才说要谨慎使⽤ 。 029、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、跨域的⽅式
1、jsonp
2、正向代理 ⽤http-proxy-middleware模块 app.use("/api",proxy({
target:"协议+域名",    changeOrigin:true }))
3、cors PHP中
031、在Vue中使⽤插件的步骤 * 采⽤ES6的import ... from ...语法或CommonJSd的require()⽅法引⼊
插件
* 使⽤全局⽅法Vue.use( plugin )使⽤插件，可以传⼊⼀个选项对象Vue.use(MyPlugin, { someOption: true })
032、请列举出3个Vue中常⽤的⽣命周期钩⼦函数 * created: 实例已经创建完成之后调⽤，在这⼀步，实例已经完成数据观测, 属性和⽅法的运算, watch/event事件回调. 然⽽, 挂载阶段还没有开始, $el属性⽬前还不可见
* mounted: el被新创建的 vm.$el 替换，并挂载到实例上去之后调⽤该钩⼦。如果 root 实例挂载了⼀个 ⽂档内元素，当 mounted 被调⽤时 vm.$el 也在⽂档内。
* activated: keep-alive组件激活时调⽤ 033、第⼀次页⾯加载会触发哪⼏个钩⼦ 第⼀次页⾯加载时会触发 beforeCreate, created, beforeMount, mounted 这⼏个钩⼦
034、简单描述每个周期具体适合哪些场景
* beforecreate : 可以在这加个loading事件，在加载实例时触发
* created : 初始化完成时的事件写在这⾥，如在这结束loading事件，异步请求也适宜在这⾥调⽤
* mounted : 挂载元素，获取到DOM节点
* updated : 如果对数据统⼀处理，在这⾥写上相应函数
* beforeDestroy : 可以做⼀个确认停⽌事件的确认框
* nextTick : 更新数据后⽴即操作dom
035、Vue⾥⾯router-link在电脑上有⽤，在安卓上没反应怎么解决？
Vue路由在Android机上有问题，babel问题，安abel polypill 插件解决。
036、vuex有哪⼏种属性(modules)
有五种，分别是 State、 Getter、Mutation 、Action、 Module
* vuex的State特性 A、Vuex就是⼀个仓库，仓库⾥⾯放了很多对象。其中state就是数据源存放地，对应于⼀般Vue对象⾥⾯的 data
B、state⾥⾯存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发⽣改变，依赖这个 数据的组件也会发⽣更新
C、它通过mapState、mapGetters把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
* vuex的Getter特性 A、getters 可以对State进⾏计算操作，它就是Store的计算属性

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