前端面试题总结

子朔啊
114 阅读5分钟

Vue

v-if和v-show

相同点：

v-show 和 v-if 都能实现元素的显示和隐藏

不同点：

  1. v-show 通过display属性控制显隐,
    v-if是条件渲染, 条件为true 元素才会渲染, 为false 元素销毁
  2. 初始化的时候 v-show 有更高的渲染开销
  3. 切换的时候 v-if 有更高的切换开销
  4. v-if可以搭配template使用, 而v-show不行

使用场景

需要频繁切换元素显影，使用v-show较好

运行时条件很少改变， 使用v-if较好

nextTick

下次DOM更新完成之后执行的一个延迟回调。

为什么使用nextTick？

由于Vue中的DOM更新是异步执行的, 即修改数据的时，视图不会立即更新, 而是会监听数据的变化，缓存在事件循环中，等同一数据循环中的所有数据变化完成之后，才会进行视图更新。 经常我们在还未更新完成的时候就使用了某个元素，这样是拿不到更新后的DOM的。

使用场景

created中需要操作dom

响应式数据变化后获取DOM更新后的状态, 比如获取列表更新后的高度

v-for中为什么有key

作用

为了更高效的更新虚拟dom

必要性

在patch过程中判断两个节点是否是相同节点 key 是一个必要条件。渲染一组列表的时候，key是唯一标识，如果不定义key的话，vue只能认为比较的两个节点是同一个节点，就会导致频繁更新元素，会造成整个patch过程低效，影响性能

注意

尽量避免使用数组索引作为key，可能会导致一些隐藏的bug(过程中给数组排序)

原理

vue判断两个节点是否相同时主要判断两者的key和元素类型等(isSameVNodeType)，如果不设置key，它就是undefined，永远认为这是两个相同的节点，只能去做更新操作，造成了大量的dom更新操作

vue中常用指令

v-once

只渲染元素和组件一次，跳过之后的更新

v-show， v-if

v-for

v-html， v-text

v-model, v-bind, v-on

computed 和 watch

computed： 当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性

watch： watch和computed很相似。 watch是用于观察和监听页面上的vue实例， 如果要在数据变化的时候进行异步操作或者是比较大的开销，watch为最佳选择。

区别：

功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

是否调用缓存： computed中的函数所依赖的属性没有发生变换，调用当前的函数会从之前的缓存中读取，而watch在每次监听的值发生变化之后都会执行回调

是否return： computed中的函数每次都需要return返回，watch的函数不需要return

computed 默认第一次加载的时候就开始监听, watch默认第一次加载不做监听，如果需要监听需要添加 immediate 属性

使用场景：

computed： 当一个属性受多个属性影响的时候，使用computed --- 购物车商品结算

watch： 当一条数据影响多条数据的时候， 使用watch --- 搜索框

组件通信方式

父子组件

通过 $parent 直接调用父组件的方法， $children 直接调用子组件的方法

props/$emit

兄弟组件

eventBus / vuex

跨层级组件

provide / inject / vuex / eventBus

vue-router params 和 query 的区别

query和params都是在vue路由中的传参

query可以用path或者name进行路由跳转， params只能用name进行跳转

query更像get请求(地址栏会显示参数), params更像post请求，(不会在地址栏中显示参数)

vue-router params动态路由

根据给定匹配模式的路由映射到同一个组件。比如有一个User组件，对所有用户进行渲染，但是用户的id不同。

定义路径为: /user/:id

参数获取通过 this.$route.params.id 获取

keep-alive

作用

保留组件状态， 避免重复渲染。

生命周期

页面第一次进入， 钩子的触发顺序： cteated -> mounted -> activated, 再次进入的时候 只触发activated

使用方法

用过路由的参数配置当前页面是否需要缓存

meta:{
   keepAlive: true,
}

vue项目优化

1. 代码层面的优化

watch 和 computed 区分使用场景

v-if 和 v-show 区分使用场景

v-for 遍历添加key, 避免同时使用 v-if

事件的销毁 addEventlisten 、 定时器等

图片资源懒加载

路由懒加载

第三方插件的按需引入

2. webpack层面的优化

对图片进行压缩

减少es6转为es5的冗余代码

提取公共代码

模版预编译

提取组件的css

优化sourceMap

父组件异步获取动态数据传递给子组件

问题：

由于父组件的数据是异步获取的，而子组件在一开始就会渲染，会造成子组件已经渲染但是没有获取到数据的问题

解决：

子组件渲染之前， 判断父组件是否获取完成， 数据获取完成之后在进行子组件的渲染

Vue3 和 Vue2 的区别

  1. 响应式原理api的改变

v2采用的是defineProperty进行数据劫持, 监听对象的getter和setter，只能获取对象的当前属性和修改

v3采用的是Proxy和Reflect, Proxy不只能获取当前属性和修改的值，包括新增、删除等其他操作

  1. diff算法，渲染算法的改变

v3优化了对比算法，不再像v2一样对比所有dom，v3采用了 block tree 的做法，重新渲染的算法里面做了

  1. Vue3 支持碎片

在组件中可以拥有多个根节点

  1. Composition Api

v2使用的是选项式的api（options api）

v3使用的是组合式的api (composition api)

  1. 生命周期钩子函数的不同
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated

beforecreate 和 created 被 setup代替

beforeDestroy 和 destroyed 重新命名为 onBeforeUnmount、onUnmounted

  1. Teleport

Teleport包裹的内容可以挂载到任意的dom元素上

  1. Suspense

等待异步组件渲染时渲染一些额外的内容，让应用拥有更好的体验

  1. v-for 和 v-if 的优先级区别

Vue2： 在同一个元素上使用 v-for 和 v-if 的时候，v-for的优先级较高

Vue3: v-if优先，其次是v-for

avatar
文章
阅读
粉丝