7. slot是什么？有什么作用？原理是什么

slot又名插槽，是vue内容分发机制，组件内部的模版引起shiyongslot元素作为承载内容分发的出口，插槽slot是子组件爱你一个模版标签，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot又分三类，默认插槽，具名插槽和作用域插槽。

默认插槽：

又称为匿名插槽当slot没有指定name属性值的时候一个默认显示的插槽，一个组件只有一个匿名插槽

具名插槽：

带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。

作用域插槽

：默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件的传递过来的数据决定如何渲染该插槽。

实现原理：

当子组件vm实例化的时候，获取到父组件传入的slot标签的内部

8. 过滤器的作用，如何实现一个过滤器

需要格式化数据的情况，比如需要处理时间，价格等数据格式的输出和现实

比如后端返回一个年月日的日期字符串，前端需要展示位多少天前的数据

过滤器是一个函数，他会把表达式当中的值始终当做函数的第一个参数，过滤器用在插值表达式{}}和v-bind的表达式当中，

9. 如何保存页面的当前的状态

既然是要保持页面的状态（其实也就是组件的状态），那么会出现以下两种情况：

●前组件会被卸载

●前组件不会被卸载那么可以按照这两种情况分别得到以下方法组件会被卸载：

（1）将状态存储在LocalStorage / SessionStorage

只需要在组件即将被销毁的生命周期在localStorage、sessiosnStorage当中把当前组件的state通过JSON.stringfy存储下来就可以了，在这里面需要注意的是组件更新状态的事迹

比如从b组件跳转到a组件的时候a组件需要更新自身的状态，但是如果从别的组件跳转到b组件的时候，实际上是希望b组件重新渲染的，也就是b组件重新渲染的，也就是不要从storage当中读取信息，所以需要再storage当中的状态加入一个flag属性，用来控制a组件是否读取storage当中的状态

有点：

兼容性好，不需要额外的库或者工具

简单快捷，基于可以满足大部分需求

缺点：

状态通过json方法存储，相当于深拷贝，●状态通过 JSON 方法储存（相当于深拷贝），如果状态中有特殊情况（比如 Date 对象、Regexp 对象等）的时候会得到字符串而不是原来的值。（具体参考用 JSON 深拷贝的缺点）

●如果 B 组件后退或者下一页跳转并不是前组件，那么 flag 判断会失效，导致从其他页面进入 A 组件页面时 A 组件会重新读取 Storage，会造成很奇怪的现象

如果b组件后退或者下一页跳转并不是前组件，那么flag判断就会失效，导致从其他页面进入a组件页面的时候a组件会重新读取storage,会造成很奇怪的现象

路由传值：

通过react-router的link组件的prop=to可以实现路由间的传递参数的效果，在这里需要用到state参数，在b组件当中通过history.location.state就可以拿到sate的值，保存他，返回a组件的时候再次携带state大道路由状态保持的结果

优点

●简单快捷，不会污染 LocalStorage / SessionStorage。

●可以传递 Date、RegExp 等特殊对象（不用担心 JSON.stringify / parse 的不足）

缺点

●如果 A 组件可以跳转至多个组件，那么在每一个跳转组件内都要写相同的逻辑组件不会被卸载：

1.单页面渲染

要切换的组件作为子组件全屏渲染，父组件中正常储存页面状态。

优点●代码量少●不需要考虑状态传递过程中的错误

要切换的组件作为子组件全屏渲染，父组件当中整出存储页面状态

缺点

●增加 A 组件维护成本

●需要传入额外的 prop 到 B 组件

●无法利用路由定位页面

除此之外，在Vue中，还可以是用keep-alive来缓存页面，当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行被包裹在keep-alive中的组件的状态将会被保留

<keep-alive>
	<router-view v-if="$route.meta.keepAlive"></router-view>
</kepp-alive>

router.js

{
  path: '/',
  name: 'xxx',
  component: ()=>import('../src/views/xxx.vue'),
  meta:{
    keepAlive: true // 需要被缓存
  }
},