vue常见面试题

最新推荐文章于 2025-05-12 10:37:37 发布

cbyr

最新推荐文章于 2025-05-12 10:37:37 发布

阅读量685

点赞数

CC 4.0 BY-SA版权

文章标签： javascript react.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_57519185/article/details/121663145

本文深入探讨Vue.js的关键概念，包括数据双向绑定、虚拟DOM、渲染函数、组件通讯、路由跳转钩子、响应式原理、key的作用、路由传参方式、SEO优化策略、图片懒加载原理、HTTP状态码及v-model的工作机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，什么是数据双向绑定？

双向绑定：数据->视图，视图->数据。从数据到视图。当数据变化时，视图也跟着变化。
原理：利用数据劫持结合订阅者发布者模式，通过objeck.defineproperty中的set和get方法（作用：拦截器）set方法设置数据时触发，get是访问时触发监听。在数据变动时发布消息给订阅者（v-model、v-bind绑定的那个属性），触发相应的监听回调。对比数据变动前后的虚拟DOM，计算出那些地方需要更新，只更新需要更新的地方。

二，什么是虚拟Dom

虚拟JS创建出来的一个对象，拥有和真实Dom相同结构的对象，不同是它没有真实Dom身上那些无用的属性。

三，render函数的理解

渲染函数, template 通过 compile 解析器解析成 ast 语法树, 内部转换为render函数, 返回值就是一个 Vnode 虚拟DOM节点, 数据项改变就会重新执行render函数, 通过比较新旧虚拟DOM, 来最小化改动来提高性能

四，父子组件通讯触发的钩子函数？

加载渲染过程：

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程：

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程：

父beforeUpdate->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

五，当发生路由跳转时会触发哪些钩子：

触发进入其它路由

调用要离开路由的组件守卫beforeRouteLeave
调用全局的前置守卫 beforeEach
(如果是嵌套路由这里会有执行父路由的beforeRouteUpdate)
在路由配置里调用 beforeEnter

解析异步路由组件

在将要进入的路由组件中调用 beforeRouteEnter
调用全局的解析守卫 beforeResolve

导航被确认

调用全局的后置钩子 afterEach。
beforeCreate
created
beforeMounte
执行 beforeRouteEnter的next的回调，创建好的组件实例会作为回调函数的参数传入。
触发 DOM 更新 mounted。

六，响应式原理：

利用object.defineProperty对数据进行劫持，通过观察者模式，一旦数据变化通过Dep（相对应的回调）通知所有的 watcher 观察者执行相应操作最后进行更新

Dep

代码层：结构类似二维数组，Dep：[数据1Dep：[渲染watcher ，计算属性watcher ，侦听器watcher] , 数据2Dep：[...]]
作用：收集依赖，通过数组记录所有的观察者

watcher

一个观察者集合，渲染watcher ，计算属性watcher ，侦听器watcher ，当数据变化会先通知侦听器和计算属性，最后渲染

七，vue中key的作用

给每个元素绑定唯一值，提高渲染效率，通过key值来匹配上一次key值相等的元素，如果相同就进行新旧虚拟dom对比，重新渲染

八，vue跳转路由的传参方式？（query和params的区别）

query传参：通过path或者路由别名（name）后面拼接将对象的信息的方式（参数较多通过&隔开）；通过this.$route.query.属性名进行获取

params传参：通过命名路由的方式进行传参；通过this.$route.params.属性名进行获取

总结：query传参会暴露对象信息；params传参不会暴露信息但是页面刷新时会丢失，解决方案 ,在收到参数后立即在本地进行保存，即使刷新后还能从本地获取

九，vue项目进行SEO优化

1，SSR服务器渲染：在服务器端对html页面进行解析渲染，浏览器拿到的是解析完的页面解构。缺点：服务器nodejs环境的要求，源代码改造成本较高。

2，使用Phantomjs针对爬虫做处理，Phantomjs是一个可编程的无头浏览器，拥有完整的浏览器内核,包括js解析引擎,渲染引擎,请求处理等,但是不包括显示和用户交互页面的浏览器。在使用时通过Nginx配置，判断访问来源是否是爬虫，如果是将搜索引擎的爬虫请求转发到node server，通过PhantomJS来解析完整的html，然后返回给爬虫优点：不需要改动项目代码，对比开发SSR成本小很多，对于已用SPA开发完的项目是一个很好的选择，,

3，静态化：利用Nuxt.js进行静态化打包，在编译打包时帮你处理请求等事件，返回一个纯静态的文件，因为是纯静态的页面，安全性也会更高

4，预渲染：使用插件对少数页面做SEO处理，在构建页面时对特定路由生成静态html文件，对代码改动较小。

十，图片懒加载的原理

在img的src属性上放置路径，将路径放在另一个属性data-src中，在图片进入到可视区域之前将URl取出放到src中

实现步骤：

1，将src替换成data-src，data-* 全局属性：构成一类名称为自定义数据属性的属性，可以通过HTMLElement.dataset来访问。
2，判断元素是否在可视区域，可以使用MDN提供的getBoundingClientRect()方法来获取元素的大小以及位置，这个方法返回一个名为ClientRect的DOMRect对象，包含了top、right、botton、left、width、height这些值。滚动条向下滚动的如果距离顶部的top<=可视区域的高度（利用window.innerHeight获取）进行加载图片
3，通过el.dataset.src取出路径，给到src。