2022/5/29

vue组件中的data为什么是一个函数?

1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。

2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。

3.当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

4.当我们组件的date单纯的写成对象形式，这些实例用的是同一个构造函数，由于JavaScript的特性所导致，所有的组件实例共用了一个data，就会造成一个变了全都会变的结果。

为什么new Vue这个里面的data可以放一个对象？

因为这个类创建的实例不会被复用。它只会new一次，不用考虑复用

JWT (jsonwebtoken)

• JWT出现的原因:

  • http无状态协议: 当客户端发来请求时，服务端并不清楚该请求是哪台主机发出的，因此需要有一种识别和鉴定机制来实现这一需求
  • 对比传统的session存储的缺点:服务器缓存session_id，需要定期清理session_id表,且不能识别跨域请求等

• jwt原理：全称是json web token， 简单来说JWT就是通过可逆加密算法，生成一串包含用户、过期时间等关键信息的Token，每次请求服务器拿到这个Token解密出来就能得到用户信息，从而判断用户状态。jwt的组成部分:标准的jwt令牌分为三部分，分别是Header、payload、signature；

• 单机情况下实现JWT的实现流程

（1）客户端登录成功后（必须是在登陆成功才行，与session一样的前提条件），服务器会根据用户名和签名以及其他信息加密生成唯一的token串，用来区分他们，不需要存入服务端的缓存中，但会把这个token返回给相应的主机，

（2）主机收到token后会存入cookie或者localStorage中，以后主机的每一次发送其他类型的请求的操作都会携带这个token，

（3）服务器会将客户端发来的这个token和服务端从数据库查询出来的并且重新计算得到的用户信息进行对比，如果匹配，则认证成功，如果用户请求的资源需要相应的权限，则校验token中的payload中存储的权限等相关信息，如果有权限则返回给对应主机所需要的资源（即做到了权限鉴权），否则拒绝

Vue中的key到底有什么用

1、key的作用主要是为了高效的更新虚拟dom，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少dom操作量，提高性能。

2、另外，若不设置key还可能在列表更新时候引发一些隐藏的bug。

3、vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

v-for中为什么要用key

key的作用: key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

（1）、如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。

（2）、如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed

官方文档: 如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误

vue的移动端适配是怎么做的

vue 的移动端适配我们可以参考 vant-ui 组件库给我们提供的方案。

使用 amfe-flexible(用于自动定义跟字体大小)插件和 postcss-pxtorem(用于将 px 自动转成 rem)插件

在 main.ts 里面 import "amfe-flexible"

在根目录新建 .postcssrc.js 文件

module.exports = { 
  plugins: { 
    "postcss-pxtorem": { 
      rootValue: 37.5, 
      propList: ["*"], 
}, }, };

rem 是相对于跟字体的倍数，如果我们整个项目都是用 rem 作为单位，那么当我们做移动端的响应式的

时候只需要去改变跟字体的大小就能做到适配。

后台管理系统用户验证权限

1. 登录

用户填写完账号和密码后向服务端验证是否正确，登录成功后，服务端会返回一个 token（该token 的是一个能唯一标示用户身份的一个 key），之后我们将 token 存储在本地localstorage 之中，这样下次打开页面或者刷新页面的时候能记住用户的登录状态，不用再去登录页面重新登录了。为了保证安全性，后台所有 token 有效期(Expires/Max-Age)都是 Session，就是当浏览器关闭了就丢失了。重新打开浏览器都需要重新登录验证，后端也会在每周固定一个时间点重新刷新 token，让后台用户全部重新登录一次，确保后台用户不会因为电脑遗失或者其它原因被人随意使用账号。

2. 拦截路由进行判断

页面会先从 localstorage 中查看是否存有 token，没有，就走一遍上一部分的流程重新登录，如果有 token,就会把这个 token 返给后端去拉取 user_info，保证用户信息是最新的。 当然如果是做了单点登录得的的话，用户信息存储在本地也是可以的。当你一台电脑登录时，另一台会被提下线，所以总会重新登录获取最新的内容。

3. 权限控制

前端会有一份路由表，它表示了每一个路由可访问的权限。当用户登录之后，通过 token 获取用户的 role ，动态根据用户的 role 算出其对应有权限的路由，再通过 router.addRoutes 动态挂载路由。但这些控制都只是页面级的，说白了前端再怎么做权限控制都不是绝对安全的，后端的权限验证是逃不掉的。前端控制页面级的权限，不同权限的用户显示不同的侧边栏和限制其所能进入的页面(也做了少许按钮级别的权限控制)，后端则会验证每一个涉及请求的操作，验证其是否有该操作的权限，每一个后台的请求不管是 get 还是 post 都会让前端在请求 header 里面携带用户的 token，后端会根据该 token 来验证用户是否有权限执行该操作。若没有权限则抛出一个对应的状态码，前端检测到该状态码，做出相对应的操作。

4. 利用 vuex 管理路由表，根据 vuex 中可访问的路由渲染侧边栏组件。

创建 vue 实例的时候将 vue-router 挂载，但这个时候 vue-router 挂载一些登录或者不用权限的公用的页面。

当用户登录后，获取用 role，将 role 和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。

调用 router.addRoutes(store.getters.addRouters)添加用户可访问的路由。

使用 vuex 管理路由表，根据 vuex 中可访问的路由渲染侧边栏组件。

vuex做数据请求刷新页面，数据可能会发生丢失这个问题怎么解决

因为 store 里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载 vue 实例，store 里面的数据就会被重新赋值初始化。

所以我们可以在修改 store 的数据同时将数据再存一份到本地存储(localStorage 或者 sessionStorage),本地存储的内容是存在浏览器里面的，不会因为刷新而丢失。

我们也可以用过比如 vuex-persistedstate 这样的第三方包来帮助我们做 vuex 的持久化数据。

route和router的区别

route 和 router 是vue-router中经常会操作的两个对象， route 表示当前的路由信息对象，包含了当前 URL 解析得到的信息，包含当前的路径、参数、query对象等，一般用于获取跳转时传入的参数。

router 对象是全局路由的实例，是router构造方法的实例，一般用户路由跳转，如

router.push() 、 router.replace() 等方法