【4.24理论题】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

11）vue双向数据绑定原理?(必问) 过⼀下

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

12）vue常⽤的指令有哪些?(50%)

v-if
v-show
v-html
v-text
v-on
v-bind
v-model
v-for

13）vue常⽤的修饰符有哪些?(50%)

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

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

15）vue中key的作⽤是什么?(必问)。过⼀下

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

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

keep-alive是vue内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，我们能够知道，⼀般情况下，组件进⾏切
换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数
据。那么就可以利⽤keep-alive来实现
在搭建 vue 项⽬时，有某些路由组件没必要多次渲染，所以需要将组件在内存中进⾏‘持久化’，此时在router-view上使⽤
keep-alive。 keep-alive可以使被包含的路由组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下
⼀次显示时，也不会重新渲染。
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会
被缓存。 max-数字最多可以缓存多少组件。

17）说⼀下什么是vue过滤器? 有⼏种?项⽬中如何使⽤,请举例说明?(60%)

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

vue3 中没有过滤器了

18）说⼀下你对slot插槽的理解?

⾸先呢,所谓的插槽就是⼀个占位符,将⾃定义组件的内容展示出来.我们知道⾃定义的组件⾥⾯如果写内容的话,⻚⾯是不会显
示出来的,如果我们想让⾃定义组件⾥⾯的内容显示出来,我们就需要使⽤slot的插槽.
⽽插槽分别具名插槽和匿名插槽、以及作⽤域插槽. 我们⽤的⽐较多的具名插槽和匿名插槽,具名插槽需要所有slot标签上指定
name属性,⽽在对应标签上添加v-slot属性.
在项⽬中我们⼀般在进⾏组件封装的时候会使⽤插槽,以上就是我对插槽的理解.

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

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

20）说⼀下如何对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⽅法