接上篇

vue

1. 你了解diff算法吗?它的时间复杂度是怎样的?(字节跳动)
Diff算法的作用是用来计算出 Virtual DOM (虚拟DOM)中被改变的部分,然后针对该部分进行原生DOM操作,而不用渲染真实DOM(会引起整个DOM的重绘和重排)即不用重新渲染整个页面。
过程: 我们先根据真实DOM生成一颗virtual DOM,当virtual DOM某个节点的数据改变后会生成一个新的Vnode,然后Vnode和oldVnode作对比,发现有不一样的地方就直接修改在真实的DOM上,然后使oldVnode的值为Vnode。
diff的比较方式: 只会同层比较,不会跨层比较;当节点处于同一层级时,Diff提供三种DOM操作:删除、移动、插入。
时间复杂度为O(n)

2. vuex的执行流程是怎样的?(字节跳动)

vuex是状态集中管理的仓库 广泛用于各组件传值和共享数据
它有五个核心概念:分别是 State、 Getter、Mutation 、Action、 Module

当组件进行数据修改的时候,我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法中都会有一个commit方法,当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。 mutations里面的每个函数都会有一个state参数,这样就可以在mutations里面进行state的数据修改 ,当数据修改完毕后,会传导给页面,页面的数据也会发生改变。
3. vue router hash和history模式有什么区别?(字节跳动)

hush模式下的url里含有#,history模式则没有,hush模式里的#号实际上只出现在路由中,请求时不予发送,hush时只有#前的东西会发送给后端,因此没有路由全覆盖也不会404,而且hush模式下只允许修改#后的值 ;而history模式时, 前端的 URL 必须和实际向后端发起请求的 URL 完全一致,因此极其容易发生404。
4. vue2和vue3有哪些区别?(字节跳动)

  • 提出的新API setup()函数
  • 了对于Typescript的支持
  • 替换Object.defineProperty为 Proxy 的支持。(因为传统的原型链拦截的方法,无法检测对象及数组的一些更新操作,但使用Proxy又带来了浏览器兼容问题)

5. router-link与router-view有什么区别?(字节跳动)

  • router-link相当于是类似a标签的导航链接,点击<router-link :to="...">时,内部调用 router.push(...)方法
  • router-view 是命名视图,用来渲染通过路由映射过来的组件,当路径更改时, 中的内容也会发生更改,可以嵌套使用
  • 二者配合使用,可以实现几个跳转链接跳到对应的子页面,程序运行的时候,会将<template>标签里面的内容都注入到App.vue页面中的router-view标签中,从而实现无刷新的路由跳转

6. vue双向绑定的原理是什么?(滴滴,快手)

采用 数据劫持 结合 发布者-订阅者模式 的方式,通过 Object.defineProperty() 来劫持各个属性的 setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

Object.defineProperty( )可以来控制一个对象属性的一些特有操作,比如读写权、是否可以枚举,重要的是它的两个描述属性get(依赖收集)和set(派发更新),对其get和set进行重写操作,顾名思义,get就是在读取属性这个值触发的函数,set就是在设置属性这个值触发的函数。

具体流程:

  • 实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
  • 实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
  • 实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。
  • 下图中dep 是消息订阅器
    2019前端一些大厂面经系列———vue,node
    7. vue中组件与组件之间的通信方式(快手)
  • props/$emit
  • $emit/$on
  • vuex
  • $attrs/$listeners
  • provide/inject
  • $parent/$childrenref

具体了解戳这里

8. vue的生命周期顺序是怎样的?Vue 的父组件和子组件生命周期钩子执行顺序是什么?(滴滴)
生命周期顺序:

beforeCreate(初始化界面前)–> created(初始化界面后)–> beforeMount(渲染dom前)–> mounted(渲染dom后)–> beforeUpdate(更新数据前)–> updated(更新数据后)–> beforeDestroy(卸载组件前)–> destroyed(卸载组件后)
父组件生命周期钩子执行顺序:

  • 加载渲染过程:父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
  • 子组件更新过程:父beforeUpdate->子beforeUpdate->子updated->父updated
  • 父组件更新过程:父beforeUpdate->父updated
  • 销毁过程:父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

9. route 和 router 的区别是什么?(字节跳动)
route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。
router是“路由实例对象”,包括了路由的跳转方法(push、replace),钩子函数等。

node

1. 介绍一下node中间件(滴滴)
中间件就是请求req和响应res之间的一个应用,请求浏览器向服务器发送一个请求后,服务器直接通过request定位属性的方式得到通过request携带过去的数据,就是用户输入的数据和浏览器本身的数据信息,这中间就一定有一个函数将这些数据分类做了处理,最后让request对象调用使用,这个处理函数就是我们所所得中间插件。比如生活中的租客和房主,中间需要一个中介来搭桥,这个中介就类似于中间件。
2. node路由是什么?(字节跳动)
node中的路由由自己的框架处理,通过分析url路径分发到相应控制器中,一个路由对应的是一个或多个负责请求调用的js文件,里面包括业务逻辑(拦截,捕获,处理)
路由是一组映射关系,分析URL将访问的内容映射到实际的action或者controller上。

相关文章: