分享前端十道面试题 vue2篇（2）

1.vue双向数据绑定原理？

vue.js是采用  数据劫持  结合  发布者-订阅者  模式的方式，通过Object.defineProperty()，来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发响应的监听回调，这个时候就可以实现数据的双向绑定。

2.vue常用指令有哪些？

v-if

v-show

v-html

v-text

v-on

v-bind

v-model

v-for

3.vue常用的修饰符有哪些？

.trim 去除首尾多余的空格

.stop 阻止实现冒泡

.once  只执行一次

.self  事件只作用在元素本身的时候触发

.number  将值转化为number类型

.capter  组件之间的捕获

.prevent  阻止事件的默认行为

.native  事件穿透，让我们可以在自定义组件上定义事件和方法

4.vue如何封装可复用的组件？请举例说明你封装过的组件

1.分析项目的所有页面结构和业务功能，挑选出相同的页面结构和 业务功能

2.在src目录下创建components文件夹

3.在这个文件夹里创建可复用的组件

4.在需要用的组件里引入这个可复用的组件并进行注册，以标签的形式写在对应的地方

5.对可复用的组件内容进行封装，封装的时候要注意组件的封闭性和开放性以及粗细力度

6.封闭性就是组件内部定义好之后外部无法修改，比如有个关闭按钮，需要使用的时候都显示，无法从外部修改

7.开放性就是将动态的内容以及组件通信的方式进行数据传递，保证组件的可扩展性

8.粗细力度就是可以把一整个页面当成一个组件去封装，也可以一个页面包含多个组件，需要根据业务需求去判断

9.可复用组件核心就是通过vue提供的组件通信结合slot插槽来进行封装

比如说封装一个搜索框的组件：

1.在components里面创建search.vue

2.在search.vue里实现搜索框的布局

3.在props里面接收title，以及点击搜索按钮或者按下回车的时候触发一个方法，通过this.$emit将输入框的内容传递给父组件

4.在父组件中import引入，并进行注册

5.在页面中就可以通过传递title控制子组件搜索框显示的内容，通过监听$emit里面定义的方法来获取搜索框输入的值

5.vue中key的作用是什么？

避免dom元素重复渲染，我们一般在设置key的时候会优先设置为id，或者index下标

6.说下对keep-alive的理解？在项目中如何使用？

keep-alive是vue提供的一个内置组件，作用是能够缓存不活动的组件，一般情况下，组件进行切换的时候会默认进行销毁，如果有需要，某个组件切换后不销毁，保存之前的状态，比如说刚填好的表单数据，就可以用keep-alive来实现

在搭建vue项目时，有某些路由组建没必要多次渲染，需要将组件在内存中进行 ‘持久化’ ，此时在router-view上使用keep-alive可以让被包含的组件状态维持不变，即使组件切换了，其状态依旧维持在内存中，在下一次显示时，也不会重新渲染

include - 字符串或正则表达式。只有名称匹配的组件会被缓存

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存

max - 数字  最多可以缓存组件

7.说一下什么是vue过滤器？有几种？项目中如何使用？举例说明

vue过滤器就是将数据进行二次处理，得到我们想要的数据

vue的过滤器分为两种，第一种是全局过滤器，通过vue.filter来定义，第二组是局部过滤器，需要定义在组件内部

项目中我们通过过滤器将后台返回的状态0和1转化为支付号或者未支付

 8.说一下对slot插槽的理解？

所谓的插槽就是一个占位符，将自定义组件的内容展示出来，自定义的组件里面写内容的话，页面是不会显示的，想要内容显示出来，就需要使用slot插槽

插槽分为具名插槽和匿名插槽、以及作用插槽，我们用的比较多的就是具名插槽和匿名插槽，具名插槽需要所有的slot标签上指定name属性，而在对应标签上添加v-slot属性

项目中一般在进行组件封装的时候会使用插槽

9.说一下vue中本地跨域如何解决？线上跨域如何解决？

本地跨域是通过在vue.config.js文件里面的devServer属性里面的proxy属性里面配置，一共配置三个属性，分别是代理名称  代理地址  开启跨域  重写路径

线上跨域是在nginx.conf文件里面配置，代理名称是通过location代理名称。proxy_pass代理地址

10.说一下如何对axios进行二次封装？以及api如何封装？

1.在src文件夹内创建utils文件夹

2.在utils文件夹内创建request.js文件

3.在request.js内引入axios

4.使用axios.create方法创建axios的实例，在axios.create方法里面可以配置请求的公共地址和超时时间以及其他的一些配置

5.在创建请求拦截器和响应拦截器

6.在请求拦截器里面获取vuex的token，并通过config.header.token = vuex的token，将token发送给后台

7.在请求拦截里配置loading加载

8.在响应拦截器里面我们可以结束loading加载以及token的过期处理，以及错误响应信息的处理

9.最后通过export default导出axios的实例对象

api封装

10.在src文件夹内创建api文件夹

11.在api文件夹内创建对应模块的js文件

12.在对应的文件里引入request.js文件

13.封装api方法

14.最后通过export default导出封装的api方法