2021 前端 VUE 面试题总汇

最新推荐文章于 2023-06-08 08:58:50 发布

m0_54883970

最新推荐文章于 2023-06-08 08:58:50 发布

阅读量378

点赞数 1

分类专栏：前端 html 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_54883970/article/details/123339556

版权

文章目录1、vue的生命周期2、Vue2.x 双向绑定原理3、Vue3.x 响应式原理4、v-for 为什么要加上 key5、Vdom的理解6、vuex 的结构，以及 actiion 和 mutation 的区别7、axios 的原理以及优点，如何终止 axios 请求8、vue 的缺点9、vue 和 react 区别10、computed 和 watch 区别，以及 computed 如何实现缓存和更新的11、hash 和 history 区别，分别是怎么实现的12

摘要由CSDN通过智能技术生成

文章目录

1、vue的生命周期

beforeCreate：实例初始化之后；数据观测和事件配置之前调用，组件的选项对象还没有创建，el挂载和data都没有初始化，无法访问方法和数据。
created：实例创建完成之后调用；已经完成了数据观测，属性方法的运算，watch/event 事件回调，data数据初始化已经完成，el挂载还没有开始。
beforeMount：挂载之前调用；el初始化已经完成，vdom已经完成data和模板的结合生成html，但是还没有挂载到html页面里。
mounted：挂载完成之后调用；模板中的html渲染到html页面里。
beforeUpdate：数据更新之前调用；发生在vdom重新渲染和打补丁之前，可以进一步更改状态，不会触发重新渲染。
updated：数据更新，dom渲染之后调用；要避免在这里更改状态，防止更新导致的无线循环。
beforeDestory：实例销毁之前调用；还可以获取到this，一般用于清除定时器和监听事件等。
destoryed：实例销毁之后调用；所有监听事件被清除，子实例被销毁。
activated：（keep-alive的生命周期）页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated：（keep-alive的生命周期）页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

2、Vue2.x 双向绑定原理

vue 是通过数据劫持结合发布者-订阅者来实现双向绑定；数据劫持通过Object.defineProperty（）方法的get和set方法来重新定义，set是设置属性值触发的函数，get是读取属性值触发的函数；

底层实现：

1、监听器observer，object.defineProperty 的set方法监听所有属性，有变动通知订阅者，在这里还需要创建一个消息订阅器Dep来收集订阅者
2、订阅者watcher，接收变化通知执行相应函数，更新view
3、解析器compile，扫描解析每一个节点的指令，初始化订阅器

详细过程参考

3、Vue3.x 响应式原理

Vue3.x改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理，这样就实现了深度观测。

监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

4、v-for 为什么要加上 key

key 的主要功能是提高 vdom 的更新速度；因为 vue 在 patch （补丁）过程中的 diff 算法对新旧节点比对时是可以通过 key 精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使 patch 过程更高效。（源码位置：src/core/vdom/patch.js）
尽量避免使用index最为key值。

function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

5、Vdom的理解

vdom 就是用 js 对象来描述真实 DOM，虚拟DOM的实现就是普通对象包含tag、data、children等属性对真实节点的描述。（本质上就是在JS和DOM之间的一个缓存）；由于直接操作 DOM 性能低，但是 js 层的操作效率高，可以将 DOM 操作转化成对象操作，最终通过diff算法比对差异进行更新DOM (减少了对真实DOM的操作)。虚拟DOM不依赖真实平台环境从而也可以实现跨平台。

优点：

1、保证性能下限：可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能；
2、无需手动操作dom：极大提高我们的开发效率；
3、跨平台：虚拟 DOM 本质上是 JavaScript 对象；

缺点：

无法进行极致优化：在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化

6、vuex 的结构，以及 actiion 和 mutation 的区别

结构：state（初始化数据）、action（异步处理数据）、mutation（唯一能够修改state的操作）、getter（从state中动态获取相关数据）、module（模块化）

区别：

1、action可以异步，mutation必须同步
2、mutation是唯一可以修改state的（commit）
3、action修改state需要经过mutation（dispatch）

最低0.47元/天解锁文章

m0_54883970

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
2021 前端 VUE 面试题总汇

文章目录1、vue的生命周期2、Vue2.x 双向绑定原理3、Vue3.x 响应式原理4、v-for 为什么要加上 key5、Vdom的理解6、vuex 的结构，以及 actiion 和 mutation 的区别7、axios 的原理以及优点，如何终止 axios 请求8、vue 的缺点9、vue 和 react 区别10、computed 和 watch 区别，以及 computed 如何实现缓存和更新的11、hash 和 history 区别，分别是怎么实现的12
复制链接

扫一扫