vue插槽面试题_vue面试题（一）

1.v-show与v-if的区别

v-show：操作的是元素的display属性

v-if：操作的是元素的创建和插入

v-if有更高的开销，而v-show有更高的初始化渲染开销，如果需要非常频繁地切换，

则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好

使用场景：

v-show：前台数据的展示

v-if：管理系统权限列表地展示

2.methods、computed、watch三者区别

三者之间地共同点：methods、watch和computed都是以函数为基础的

computed与watch都是以Vue的依赖为基础，当所依赖的数据发生变化的时候会触发相关的函数去实现数据的变动

methods里面是用来定义函数的，需要手动才能执行，不像computed与watch“自动执行”函数

三者之间的不同点：

computed：

1.computed是一个计算属性，computed所依赖的属性发生变化时，计算属性才会重新计

算，并进行缓存。当其他数据发生改变的时候，computed属性不会重新计算。从而提升

性能

watch：

1.watch类似与事件监听+事件机制

2.watch的方法默认是不会执行的，只有所依赖的属性发生变化才会执行的

3.watch默认第一次是不会执行的，通过声明immediate选项为true，可以立即执行一次

handler

4.watch用来监听数据变化，给后台发数据请求

5.watch中的handler默认只能监听属性引用的变化，但内部属性是监听不到的设置deep

为true可以进行深度监听，但是性能开销也会变大

6.watch无法监听数组值得变化

watch与computed使用场景

1.watch：一个数据影响多个数据

例如：网络请求、模糊查询、浏览器自适应、监控路由对象

2.computed：一个数据受多个数据的影响

例如：商品购物车的结算、过滤某些商品数据

3.watch无法监听数组的情况，以及解决方案

无法监听数组的情况

1.利用索引直接设置一个数组项时，例如：arr[indexOfItem] = newValue；

2.修改数组的长度时，例如:arr.length = newLength;

解决方案

1.this.$set(arr,index,newVal)

2.使用数组splice方法

4.如何给一个响应式对象添加一个属性？如何删除响应式对象中的属性？

import Vue from "vue";

new Vue({

data:{

obj:{

}

}

})

通过vue.set方法 Vue.delete方法

Vue.set(obj,name,"xiaohou");

Vue.delete(obj，"name");

5.vue中自定义指令如何使用

Vue.directive();

参数一：指令名称

参数二：指令实现的函数，在回调函数中参数一是指令绑定的元素，

参数二是一个对象其中对象中有value属性代表的是表达式发挥的结果，

还有modifiers属性是指令的修饰符

6.vue中组件创建的方式有哪些

全局组件和局部组件

全局组件

Vue.component() 参数一：组件名称 参数二：组件的配置项

局部组件

new Vue({

components:{} key值为组件名称 val值为组件的配置项

})

7.vue中的过滤器如何使用

Vue.filter()

参数一：过滤器名称

参数二：过滤器实现的方法 该方法中有两个参数

参数一为需要过滤的数据

参数二：为过滤器传递的参数

8.vue中组件通讯的方式有哪些？

父传子：

1.通过绑定自定义属性，接收通过props进行接收

子传父：

1.通过绑定自定义事件

2.通过插槽作用域

非父子组件传值

1.创建公共的Vue实例对象

2.EventBus

3.手动封装事件订阅

4.Vuex

9.请解释一下vue中的单向数据流的理解

数据从父级组件传递给子组件，只能单向绑定，子组件不能直接修改从父级传递过来的数据

数据只能从一个方向来修改状态，如果父组件给N个子组件进行了数据传递。

那么某一个子组件中修改了这个数据，那么就会导致其他组件的数据也会发生改变。

这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。因此数据只能从一个方向来修改数据

10.请说一下什么是动态组件，如何使用，以及keep-alive的作用

动态组件：

让多个组件使用同一挂载点，并动态进行切换。这就是动态组件

通过保留元素，动态绑定它的is特性，可以实现动态组件

keep-alive

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

组件切换调用的时候本身会被销毁的，只要加上keep-alive进行包裹，就不会被销毁，

而是被缓存起来，下一次使用的时候直接从缓存中调用

是一个抽象组件；它自身不会渲染一个DOM元素

常用的一些属性：

include:

类型：字符串或者正则表达式

解释：只有名称匹配的组件会被缓存

exclude：

类型：字符串或者正则表达式

解释：任何名称匹配的租组件都不会被缓存

max:

类型：数字

解释：最多可以缓存多少组件实例

11.当使用keep-alive内置组件后组件会增加那两个生命周期函数

activated && deactivated：

activated：当组件为活跃状态的时候触发(活跃状态：进入页面的时候)

deactivated：缓存状态的时候触发

12.vue中solt的使用方式，以及solt作用域插槽的用法

当组件当作标签使用的时候，如果需要在组件标签内部进行嵌套内容的时候，需要

通过template组件包裹嵌套的内容，在组件内部通过进行接收

13.为什么组件内部的data是一个函数而不是一个对象？

因为每次调用组件的时候都会重新生成一个对象，如果是一个对象的情况下，data数据会进行

复用(因为对象时引用数据类型)，而当data时一个函数的时候每次调用

的时候就会返回一个新的对象

14.vue中动画如何实现

那个元素需要动画就给那个元素加 transition 标签

进入时class的类型分为以下几种

-enter -enter-active -enter-to

离开时class的类型分为以下几种

-leave -leave-active -leave-to

如果需要一组元素发生动画需要标签

16.浅谈对路由的理解

什么是路由？

根据不同的url地址展示不同的页面或者数据

路由分为前端路由和后端路由

前端路由：

1.前端路由多用于单页面开发，也就是SPA

2.前端路由是不涉及到服务器的，是前端利用hash或者HTML的historyApi来实现的，

一般用于不同的内容展示和切换

17.路由跳转的方式有哪几种？

1.a标签进行跳转。例如：首页

2.router-link进行跳转

例如：首页

3.编程式路由 例如：this.$router.push()

18.路由传值的方式有几种

1.动态路由传值。例如:path:"/home/:id/name";接收的时候通过this.$route.params

2.query传值。因为在url中？后面的参数不会被解析，因此我们可以通过query进行传值。

接收的时候通过this.$route.query

3.路由解耦。在配置路由的时候添加props为true，在需要接收参数的组件页面通过props进行接收

4.编程式导航 this.$route.push({path:"/home",query:{}})

19.请说出路由配置项常用的属性以及作用？

路由配置参数：

path:路由跳转

component：路径相对于组件

name:命名路由

meta：路由元信息

children：子路由的配置参数(路由嵌套)

props：路由解耦

redirect：重定向路由

20.编程式导航使用的方法以及常用的方法

路由跳转：this.$router.push()

路由替换: this.$router.replace()

后退：this.$router.back()

前进：this.$router.forward()

this.$router.go()

21.如何重定向路由？如何实现路由解耦？

通过配置路由项中的redirect进行重定向

在配置路由项中设置props：true 在需要接收组件的内部通过props进行接收