vue2面试题十题.2

---

前言

vue2面试题十题

---

一、vue双向数据绑定原理?？

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

---

二、vue常⽤的指令有哪些?

v-if 判断是否渲染dom节点
v-show 判断显示隐藏
v-html 渲染富文本
v-text 渲染文本
v-on 数据绑定
v-bind 事件绑定
v-model 双向数据绑定
v-for 循环

---

三、vue常⽤的修饰符有哪些?

.trim 去除⾸尾多余的空格
.stop 阻⽌事件冒泡
.once 只渲染⼀次
.self 事件只作⽤在元素本身
.number 将值转化为number类型
.capter 组件之间捕获
.prevent 阻⽌元素的默认⾏为
.native 事件穿透,让我们可以在⾃定义组件上定义事件和⽅法

---

四、 vue如何封装可复⽤的组件?以及请举例说明你封装过的组件?

1. 分析项⽬的所有⻚⾯结构和业务功能,抽离出相同的⻚⾯结构和业务功能

2. 在src⽬录下创建⼀个components这个的⽂件夹

3. 在这个⽂件夹内创建可复⽤的组件

4. 在需要的⽤的组件⾥⾯引⼊创建的这个可复⽤的组件,并进⾏注册,以标签的形式写在对应的地⽅

5. 接下来就需要对可复⽤的组件内容要进⾏封装,那么在封装的时候我们要注意组件的封闭性和开放性以及粗细粒度

6. 所谓的这个封闭性就是当我们在组件内部定义好之后外部是⽆法进⾏修改的,⽐如当前有⼀个关闭的符号,或者有⼀个箭
   头,我们需要不管任何⼈使⽤该组件时候都能够显示这个箭头,⽆法从外部进⾏修改

7. 所谓的开放性就是我们需要将动态的内容以及组件通信的⽅式进⾏数据传递,保证组件的可扩展性

8. ⽽所谓的粗细⼒度就是我们可以把⼀整个⻚⾯当作⼀个组件去进⾏封装,也可以⼀个⻚⾯包含了多个组件,⾄于到底选择
   哪种呢,这个是没有⼀个标准的,我们需要根据⾃⼰的业务需求去进⾏判断

9. 总结来说,所谓的如何封装可复⽤组件其实技术核⼼就是通过我们vue提供的组件通信在结合slot插槽来进⾏分装

10. ⽐如:封装⼀个搜索框组件:

    1 在components⾥⾯创建search.vue
    2 在search.vue⾥⾯实现搜索框的布局
    3 在props⾥⾯接受 title,以及当点击搜索按钮或者点击回⻋键的时候,触发⼀个⽅法,通过 this.$emit 将输⼊框输⼊的值传递给⽗组件

    4 接下来要使⽤这个搜索组件,我们需要通过import 在⽗组件内引⼊⼦组件,并在componetns属性⾥⾯进⾏注册
    5 在⻚⾯就可以使⽤,这个时候我们可以通过传递titile来控制⼦组件搜索框显示的内容 通过监听$emit⾥⾯定义的⽅法来获取搜索框输⼊的值

五、vue中key的作⽤是什么?

避免dom元素重复渲染. 我⻔⼀般在设置key的时候⾸先尽量会设置为id,或者index下表.

六、说⼀下你对keep-alive的理解?以及在项⽬中如何使⽤?

keep-alive 是 vue 内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，我们能够知道，⼀般情况下，组件进⾏切换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数据。那么就可以利⽤ keep-alive 来实现
被缓存的组件 切换的时候不会触发创建和销毁的钩子函数 而是会触发跟 keep-alive 相关的 activated（激活） deactivated（停用）这两个钩子函数

keep-alive 标签 有 include 属性和 exclude 属性
include 属性 定义了要缓存谁
exclude 属性 定义了不缓存谁
还可以利用 路由的 meta 信息去规定缓存谁不缓存谁

我在写项目的过程中 可以使用 keep-alive 缓存刚刚填好的表单数据 还可以记录页面滚动条的距离，离开再回来滚动条还在这个位置

七、说⼀下什么是vue过滤器? 有⼏种?项⽬中如何使⽤

所谓的 vue 过滤器就是将数据进⾏⼆次处理,得到我们想要的结果数据
vue 的过滤器分为两种,第⼀种是全局过滤器,通过 vue.filter 来进⾏定义,第⼆种是局部过滤器,需要定义在组件内部，用 filters 过滤
项⽬中我们通过过滤器将后台返回的状态 0 和 1 转化为⽀付或者未⽀付 还有对时间格式进行过滤

vue3 中没有过滤器了

八、 说⼀下你对slot插槽的理解?

所谓的插槽就是⼀个占位符,将⾃定义组件的内容展示出来.我们知道⾃定义的组件⾥⾯如果写内容的话,⻚⾯是不会显示出来的,如果我们想让⾃定义组件⾥⾯的内容显示出来,我们就需要使⽤slot的插槽.

⽽插槽分别具名插槽和匿名插槽、以及作⽤域插槽. 我们⽤的⽐较多的具名插槽和匿名插槽,具名插槽需要所有slot标签上指定name属性,⽽在对应标签上添加v-slot属性.

在项⽬中我们⼀般在进⾏组件封装的时候会使⽤插槽。

九、说⼀下vue中本地跨域如何解决?线上跨域如何解决?

本地跨域是通过在vue.config.js⽂件⾥⾯的devServer属性⾥⾯的proxy属性⾥⾯配置,⼀共配置三个属性,分别是代理名称 代理地址 开启跨域 重写路径

线上跨域是在nginx.conf⽂件⾥⾯配置, 代理名称是通过location 代理名称。proxy_pass 代理地址

十、说⼀下如何对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的实例对象
10. 在src⽂件内创建api⽂件夹
11. 在api⽂件夹内创建对应模块的js⽂件
12. 在对应的⽂件⾥⾯引⼊request.js⽂件
13. 封装api⽅法
14. 最后通过export default 导出封装的api⽅法