Vue注意事项2

Vue 中虚拟 dom 的原理是什么

什么是虚拟 DOM

虚拟 dom 就是将真实的 dom 节点，映射到 js 中，模拟成一个树形结构。

真实 dom

<div id="app">
  <p class="text">hello</p>
</div>

虚拟 dom

{
  tag: 'div',
  props: {
    id: 'app'
  },
  children: [
    {
      tag: 'p',
      props: {
        className: 'text'
      },
      children: [
        'hello'
      ]
    }
  ]
}

为什么需要虚拟 DOM

1. 最小化控制更新 dom 的粒度

2. 为跨平台提供了可能

 

Vue 项目权限处理

一般有两种方式

1. 前端将所有路由都写死在 静态路由中

2. 前端登录成功后动态获取权限路由

前端将所有路由都写死在 静态路由中

流程

1. 前端编写完整的静态路由，

2. 然后提前在 router 的 meta 属性上写上对应的用户的权限角色 role

3. 在登录成功时，根据后端返回的用户角色权限和 router 的 role 进行匹配，选择性渲染路由页面

弊端：

1. 一旦上线就很难修改，想要修改只能重新打包发布新版本

2. 无法由后端动态新增编辑

前端登录成功后动态获取权限路由

1. 用户执行登录

2. 后端接收登录信息，进行鉴权和路由权限处理，把对应的路由返回给前端

3. 前端接收路由信息，使用 addRoute 来动态编辑路由表，前端再去直接渲染

优点：

由于权限验证的业务都体现在了后端，比较方便后期的动态修改和维护，当后端修改和调整的时候对于用户来说是无感的。

如何处理 打包出来的项目(首屏)加载过慢的问题

原因

SPA-单页应用程序, 所有的功能, 都在一个页面中, 如果第一次将所有的路

由资源, 组件都加载了, 就会很慢!

一次性加载了过多的资源, 一次性加载了过大的资源。有完整的路由页面、静态资源等

解决方法

比如:

1. 配置异步组件, 路由懒加载

   const login = () => import('../pages/login.vue');

2. 图片压缩: 使用 webp 格式的图片, 提升首页加载的速度

3. CDN 加速: 配置 CDN 加速, 加快资源的加载效率 (花钱)

4. 开启 gzip 压缩 (一般默认服务器开启的, 如果没开, 确实可能会很慢, 可以让后台开一下)

5. 服务端渲染 SSR 项目

   1. vue开发项目 单页面

   2. ssr设置 只会在首页-服务端渲染 请求其他页面的时候， 单页面 路由懒加载 访问