04-22前端的一些笔记总结

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如何封装可复用的组件?以及请举例说明你封装过的组件?

• 分析项⽬的所有⻚⾯结构和业务功能,抽离出相同的⻚⾯结构和业务功能
• 在src⽬录下创建⼀个components这个的⽂件夹
• 在这个⽂件夹内创建可复⽤的组件
• 在需要的⽤的组件⾥⾯引⼊创建的这个可复⽤的组件,并进⾏注册,以标签的形式写在对应的地⽅
• 总结来说,所谓的如何封装可复⽤组件其实技术核⼼就是通过我们vue提供的组件通信在结合slot插槽来进⾏分装

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

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

6.说⼀下你对keep-alive的理解?以及在项目中如何使用?

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

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

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

7. 说⼀下什么是vue过滤器? 有⼏种?项目中如何使用,请举例说明?

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

8. 说⼀下你对slot插槽的理解?

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

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

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

10. 说⼀下如何对axios进⾏⼆次封装?以及api如何封装?

• 在src⽂件夹内创建utils⽂件夹
• 在utils⽂件夹内创建request.js⽂件
• 在request.js内引⼊axios
• 使⽤axios.create⽅法创建axios的实例,在axios.create⽅法⾥⾯可以配置请求的公共地址和超时时间以及其他的⼀些配置
• 在创建请求拦截器和响应拦截器
• 在请求拦截器⾥⾯可以获取vuex的token,并通过config.header.token = vuex的token,将token发送给后台
• 在请求拦截器⾥⾯我们配置loading加载
• 在响应拦截器⾥⾯我们可以结束loading加载以及token的过期处理,以及错误响应信息的处理
• 最后通过export default 导出axios的实例对象
• 在src⽂件内创建api⽂件夹
• 在api⽂件夹内创建对应模块的js⽂件
• 在对应的⽂件⾥⾯引⼊request.js⽂件
• 封装api⽅法
• 最后通过export default 导出封装的api⽅法