VUE的总结（4）

52.vue过滤器

过滤器是将后台返回的数据换一种形式输出，不改变原来的数据 应用场景:后台返回的状态码（性别，支付状态），商品价格

1. 全局过滤器                                                         

Vue.filter('过滤器',对应的过滤器函数)

2.局部过滤器

通过在Vue实例上挂载filers添加过滤器，只能在当前组件内部使用

53.有没有封装过组件，封装过什么，怎么封装？注意点或有哪些原则？
怎么封装：

● 首先，使用Vue.extend()创建一个组件

● 然后，使用Vue.component()方法注册组件

● 接着，如果子组件需要数据，可以在props中接受定义

● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

注意点或有哪些原则？

data数据结构设计，或者问有哪些原则

原则：

1.用数据描述所有的内容

2.数据要结构化，易于程序操作，遍历，查找

3.数据要可扩展，以便增加新的功能

组件如何设计，有什么原则

原则：

1.从功能上拆分层次

2.尽量让组件原子化，一个组件只做一件事情

3.容器组件（只管数据，一般是顶级组件）和展示组件（只管显示视图）

54.移动端项目如何适配（rem）？

css3规定：1rem的大小就是根元素的font-size的值。

   通过设置 根元素的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等，

   根据移动设备的宽度大小来实现自适应，不同的设备都展示一致的页面效果。

rem布局简单分析 分三步：

第一步：前端开发者首先拿到UI设计原型稿的宽度，750宽度，如 320px 或者640px或者750px;

第二步：增加脚本（设置根元素字体大小）

第三步：css中使用rem单位；关键点：字体大小，元素宽高，内外边距一定是根据设计稿测量得来的。

 55.有没有使用过axios、axios拦截器，跨域如何解决？

 axios拦截器：
 
// 添加请求拦截器
 
axios.interceptors.request.use
 
// 添加响应拦截器
 
axios.interceptors.response.use

 56.vue项目做过哪些优化

（1）代码层面的优化

v-if 和 v-show 区分使用场景

computed 和 watch  区分使用场景

v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

长列表性能优化

事件的销毁 addEventlisenter 事件监听

图片资源懒加载

路由懒加载

第三方插件的按需引入

优化无限列表性能

服务端渲染 SSR or 预渲染

（2）Webpack 层面的优化

Webpack 对图片进行压缩

减少 ES6 转为 ES5 的冗余代码

提取公共代码

模板预编译

提取组件的 CSS

优化 SourceMap

构建结果输出分析

Vue 项目的编译优化

（3）基础的 Web 技术的优化

开启 gzip 压缩

浏览器缓存

CDN 的使用

57.为什么做首屏优化？

首屏时间的快与慢，直接影响到了用户对网站的认知度。所以首屏时间的长短对于用户的滞留时间的长短、用户转化率都尤为重要。 

 58.如何做首屏优化？

css模块化加载，对应模块下的css交给js或jsonp请求返回

js懒执行，有交互才执行

图片在其他屏（非首屏）都采用懒加载的模式，这样既能节省流量，也能减少请求数或延迟请求数。

服务器方面：

1. 少量静态文件的域名，图片与iconfont均是放在同一个域下，减少DNS的解析事件，最好做到域名收敛。

2. 模块化接口的支持。

3. 首屏内容最好做到静态缓存

4. 对于vue和react做ssr

 59.vue常用的修饰符

.stop - 调用 event.stopPropagation()，禁止事件冒泡。

.prevent - 调用 event.preventDefault()，阻止事件默认行为。

.capture - 添加事件侦听器时使用 capture 模式。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

v-model 指令常用修饰符：

.number - 输入字符串转为数字

.trim - 输入首尾空格过滤

.lazy

 60.v-on可以监听多个方法吗？

v-on可以监听多个方法，但是同一种事件类型的方法，vue-cli工程会报错 

61.vue中编写可复用的组件

1.在 Vue 组件中，状态称为 props，事件称为 events，片段称为 slots。

Props 允许外部环境传递数据给组件

Events 允许组件触发外部环境的副作用 $emit

Slots 允许外部环境将额外的内容组合在组件中。

组件的构成部分也可以理解为组件对外的接口。良好的可复用组件应当定义一个清晰的公开接口。

2.组件间通信

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

3.命名

组件的命名应该跟业务无关。应该依据组件的功能为组件命名。

4.业务数据无关

可复用组件只负责 UI 上的展示和一些交互以及动画，如何获取数据跟它无关，因此不要在组件内部去获取数据，以及任何与服务端打交道的操作。可复用组件只实现 UI 相关的功能。

5.组件职责

约束好组件的职责，能让组件更好地解耦，知道什么功能是组件实现的，什么功能不需要实现。

组件可以分为通用组件（可复用组件）和业务组件（一次性组件）。

可复用组件实现通用的功能（不会因组件使用的位置、场景而变化）：

UI 的展示

与用户的交互（事件）

动画效果

业务组件实现偏业务化的功能：

获取数据

和 vuex 相关的操作

埋点

引用可复用组件

可复用组件应尽量减少对外部条件的依赖，所有与 vuex 相关的操作都不应在可复用组件中出现。

组件应当避免对其父组件的依赖，不要通过 this.$parent 来操作父组件的示例。父组件也不要通过 this.$children 来引用子组件的示例，而是通过子组件的接口与之交互。

6.命名空间

可复用组件除了定义一个清晰的公开接口外，还需要有命名空间。 modules

命名空间可以避免与浏览器保留标签和其他组件的冲突。特别是当项目引用外部 UI 组件或组件迁移到其他项目时，命名空间可以避免很多命名冲突的问题。

7.上下文无关

还是上面那句话，可复用组件应尽量减少对外部条件的依赖。没有特别需求且单个组件不至于过重的的前提下，不要把一个有独立功能的组件拆分成若干个小组件。

8.数据扁平化

每个 prop 应该是一个简单类型的数据。这样做有下列几点好处：

组件接口清晰

props 校验方便

当服务端返回的对象中的 key 名称与组件接口不一样时，不需要重新构造一个对象

9.使用自定义事件实现数据的双向绑定 v-model

有时候，对于一个状态，需要同时从组件内部和组件外部去改变它。

:value   oninput

例如，模态框的显示和隐藏，父组件可以初始化模态框的显示，模态框组件内部的关闭按钮可以让其隐藏。一个好的办法是，使用自定义事件改变父组件中的值  

10.使用自定义 watch 优化 DOM 操作

在开发中，有些逻辑无法使用数据绑定，无法避免需要对 DOM 的操作。例如，视频的播放需要同步 Video 对象的播放操作及组件内的播放状态。可以使用自定义 watch 来优化 DOM 的操作。

11.项目骨架

单组件不异过重，组件在功能独立的前提下应该尽量简单，越简单的组件可复用性越强。当你实现组件的代码，不包括CSS，有好几百行了（这个大小视业务而定），那么就要考虑拆分成更小的组件。

62.vue如何监听键盘事件中的按键 

 在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符：

对于一些常用键，还提供了按键别名：

全部的按键别名：

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

修饰键：

.ctrl

.alt

.shift

.meta

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件

对于elementUI的input，我们需要在后面加上.native, 因为elementUI对input进行了封装，原生的事件不起作用。