前端学习整理系列四（Vue篇）

FrankJingZhi
1,317 阅读8分钟

Vue

  1. 组件之间的通信方式

常用（推荐）不常用
父子组件$emit / propsparent/parent / attrs / ref
兄弟组件vuex$parent / eventbus
跨层级vuex / provide + inject / event bus

  1. v-for和v-if的加载顺序

vue2v-for优先级高。每次先渲染出来dom再删除，会造成资源浪费
vue3v-if优先级高。v-if时，变量还不存在，会报错

  1. 说一下生命周期

vue2vue3描述
beforeCreatebeforeCreate组件实例被创建之初
createdcreated组件实例被创建完成
beforeMountbeforeMount组件实例被挂载之前
mountedmounted组件实例被挂载之后
beforeUpdatebeforeUpdate组件实例更新之前
updatedupdated组件实例更新之后
beforeDesdroybeforeUnmount组件实例被销毁之前
desdroyedummounted组件实例被销毁之后
activatedactivatedkeep-alive组件被激活时
deactivateddeactivatedkeep-alive组件被停用时
errorCapturederrorCaptured捕获子孙组件的错误时
-renderTracked调试钩子，响应式依赖被收集时
-renderTrigered调试钩子，响应式依赖被触发时
-severPrefetchssr only，组件实例在服务器上被渲染前

  1. setup和created谁先执行？

    1. setup中没有beforeCreated和created钩子。因为setup的时候组件实例已经被创建了。vue会先执行setup的内容再执行optoins API

  2. 说一下对响应式的理解

  1. 概念：是指能够使数据变化，并能够对变化做出响应的机制
  2. 延伸：MVVM框架要解决的核心问题就是连接数据层和视图层，通过数据驱动，响应数据的变化和视图的更新
  3. Vue2是使用Object.defineProperty()实现的，该方法有一些天生的缺陷，不能监听数组方法，不能监听后新增的属性，需要对对象中的每个属性都进行监听。Vue3是使用Proxy实现，天生支持Vue2中的问题

  1. vue如何做权限管理

  1. 概述：权限分为页面权限管理和按钮权限管理

  2. 方案：

    1. 前端方案通常会设置路由守卫，让用户先登录，获取到用户信息，前端再配置一个所有路由信息的数组，然后根据不同的角色来过滤出路由表，最后再添加动态路由
    2. 后端方案通常会把所有的路由信息存储到数据库中，等用户登陆以后，根据用户角色过滤出路由表返回给前端，前端再来动态添加路由
    3. 按钮权限的控制通常会实现一个指令，例如'v-permission'，在其mounted钩子中判断当前用户角色是否需要展示按钮

  3. 比较：

    1. 纯前端的方案优点是简单，不需要做管理的页面，缺点是维护成本大，每次新增页面或者新增角色，都需要修改前端代码并重新打包部署。
    2. 后端方案需要做单独的权限管理页面，配置页面权限和按钮权限并存储到数据库中，维护起来方便

  1. vue3的新特性

  1. Composition api
  2. Script setup
  3. Teleport
  4. Fragment

  1. 说一下nextTick

  1. 概述：nextTick是等待下一次DOM更新的方法
  2. 为什么需要：vue中有异步更新策略，如果数据变化，DOM不会立刻更新，而是开启一个队列，将组建更新函数保存在队列中，放到更新函数(flushSchedulerQueue)的后面，等到本次事件循环所有更新全部完成，再批量执行更新函数。

  1. 如何处理vue中的错误

  1. 错误通常分为接口请求错误和代码逻辑错误
  2. 接口请求错误：可以通过封装axios收集错误
  3. 代码逻辑错误：可以通过全局错误处理函数app.config.errorHandler收集错误
  4. 收集到错误之后我们可以统一做一些错误的处理，例如错误提示语等

  1. 长列表优化

  1. 尽量避免大数据量，可以采用分页来处理
  2. 使用vue-virtual-scroller来做虚拟滚动，只渲染视窗内的元素
  3. 使用v-memo尽可能重用数据，减少不必要的更新

  1. vue实例挂载过程发生了什么

  1. 整体上是初始化和建立更新机制
  2. 初始化会创建组件实例，初始化组件状态，创建响应数据
  3. 建立更新机制这一步会执行一次组建更新函数，这会首次执行渲染函数，并执行patch函数将vnode转化为dom，同时首次执行渲染函数会将组件更新函数和响应数据建立依赖，使得以后的数据变化会触发组件的更新

  1. 为什么vue中data必须是个函数

主要是为了保证数据的私有性。因为组件会被用来创建多个实例，如果data是一个对象的话，那么所有的实例引用同一个对象，那么就会导致数据的混乱。如果是一个函数的话，每次创建一个实例都会返回一个全新的对象。

  1. Vue-Router中有哪些钩子，作用是什么？

  1. 按照触发顺序

名称触发时机作用
beforeRouterLeave在导航离开渲染该组件的路由时触发this可用，不支持回调，即没有next参数
beforeEach全局守卫，在进入路由之前触发身份权限验证
beforeRouterUpdate1. 在当前路由改变，但是组件被复用时触发

  1. 对于一个带有动态参数的路径，如/user/:id，在user/1和user/2之间跳转

  2. 当渲染同样的组件userDetails时 | this可用，不支持回调，即没有next参数 | | beforeEnter | 在进入路由之前被触发（只有从不同的路由进入时） | | | beforeRouterEnter | 在渲染在组件的路有被验证前调用 | 组件实例还没创建，不能获取this | | beforeResolve | 在每次导航时都会触发 | 1. 确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。

  3. 获取数据或执行其他操作（如用户无法进入页面时你希望避免执行的操作）时调用 | | afterEach | 全局后置钩子，进入路由之后触发 | 1. 对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。

  4. 第三个参数failure，反应路由的一些错误 |

  5. 完整的解析流程

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫(2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

  1. 说一下keep-alive和actived

  1. keep-alive功能是在多个组件间来回切换时缓存组件实例
  2. 当一个组件实例从dom上移除，如果它使用了keep-alive缓存，那么组件不会被卸载，而是会失活。当组件被重新插入到dom中时，组件会被重新激活。

| actived | 1. 首次挂载

  1. 缓存被激活时 | | --------- | --------------------- | | deactived | 1. 从dom上移除

  2. 组件被卸载 |

  3. 说一下vue-router的hash和history

historyhash
原理利用window.history的pushState、popState API来实现url跳转而无须重载页面利用window.onhashchange监听hash的变化，来控制页面显示哪一部分的DOM
兼容性依赖H5的history无
区别1.路由是正常的显示方式 \n2.需要后端做配置，因为要向后端发起请求，请求页面数据。如果是前端处理的嵌套路由，后端取不到页面数据，会返回404，因此后端要匹配一下，如果路由无法识别，则返回index.html。
// nginx配置案例
server{
    listen 80
    server_name xxx.com
    
    location /admin{
        root /user/aaa/bbb/admin
        index index.html
        // 就是这句话，尝试获取页面数据，取不到返回index.html
        try_files $url $url/ /admin/index.html
    }
}
/** 服务器只会解析/admin这个路径，如果是/admin/xxx/...，
服务端不会解析，如果刷新页面，前端重新向服务端请求页面数据，
服务端无法处理，会返回404。因此服务端需要对这种情况进行处理，
重定向到index.html
*/

  1. 说一下vuex和redux的区别

  1. 相同点：

    1. 都是基于flux实现的，单向数据流
    2. 流程一致，定义全局state，触发，修改state

  2. 不同点：

    1. Redux中数据是不可变的，每次执行都会返回一个新的值；vuex中数据是突变的，每次执行都是给变量重新赋值
    2. Redux在检测数据变化时，是通过diff的方式比较差异的；vuex在检测数据变化时，是通过getter/setting来比较的
    3. vuex定义了state、getter、mutation、action四个对象；Redux定义了state、reducer、action

写在最后

往期文章

前端面经整理系列一（javascript篇）

前端面经整理系列二（css篇）

前端面经整理系列三（框架通识篇）

avatar
文章
阅读
粉丝