【无标题】

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 如何封装可复⽤的组件 ? 以及请举例说明你封装过的组件 ?(50%) 讲解

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

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

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

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

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

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

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

    8. ⽽所谓的粗细⼒度就是我们可以把⼀整个⻚⾯当作⼀个组件去进⾏封装 , 也可以⼀个⻚⾯包含了多个组件 , ⾄于到底选择

哪种呢 , 这个是没有⼀个标准的 , 我们需要根据⾃⼰的业务需求去进⾏判断

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

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

            1. 在components⾥⾯创建 search.vue

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

            3. 在props⾥⾯接受 title, bgColor, size , icon, 以及当点击搜索按钮或者点击回⻋键的时候 , 触发⼀个⽅法 , 通过

this.$emit 将输⼊框输⼊的值传递给⽗组件

            4. 接下来要使⽤这个搜索组件,我们需要通过 import 在⽗组件内引⼊⼦组件 , 并在 componetns 属性⾥⾯进⾏注册 ,

            5. 在⻚⾯就可以使⽤,这个时候我们可以通过传递 titile ⽼控制⼦组件搜索框显示的内容 , 通过 bgcolor 可以控制搜索框

的背景颜⾊ , 也可以通过 size 设置搜索框字体的⼤⼩ , 也可以通过 icon 来设置搜索框的图标 , 通过监听 $emit ⾥⾯定义

的⽅法来获取搜索框输⼊的值

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

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

6. 说⼀下你对 keep-alive 的理解 ? 以及在项⽬中如何使⽤ ?(90%) 过⼀下

keep-alive 是 vue 内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，我们能够知道，⼀般情况下，组件进⾏切 换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数 据。那么就可以利⽤keep-alive来实现

在搭建 vue 项⽬时，有某些路由组件没必要多次渲染，所以需要将组件在内存中进⾏ ‘ 持久化 ’ ，此时在 router-view 上使⽤

keep-alive 。 keep-alive 可以使被包含的路由组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下 ⼀次显示时，也不会重新渲染。

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会 被缓存。 max- 数字最多可以缓存多少组件。

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

所谓的 vue 过滤器就是将数据进⾏⼆次处理 , 得到我们想要的结果数据

vue 的过滤器分为两种 , 第⼀种是全局过滤器 , 通过 vue.filet 来进⾏定义 , 第⼆种是局部过滤器 , 需要定义在组件内部

项⽬中我们通过过滤器将后台返回的状态 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 的实例对象

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

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

12. 在对应的⽂件⾥⾯引⼊ request.js ⽂件

13. 封装 api ⽅法

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