vue2 相关面试题

95 阅读6分钟

1.说说你对vue的理解,有什么优缺点?

vue是一个渐进式js框架,提供一套声明式、组件化的编程模型,被广泛用于构建单页面应用程序;

特点: 易学易用、社区活跃

缺点:不利于seo,虽然性能不如react,但是也够用

2.什么事虚拟DOM?

在内存中创建一个js对象映射真实的dom树,从而减少对真实dom树的操作次数,提高页面渲染效率

3.vue 的生命周期,做什么事

beforeCreate 实例未创建

created 实例已创建但未渲染,再次进行的交互数据暂存data中

beforeMount 模版渲染完成 但未渲染到页面上

mounted 页面渲染完毕 可以访问真实dom

beforeUpdate 当数据发生改变时,内存中数据已经改变,但是页面上数据还没有改变

updated 内存与页面数据保存一致

beforeDestroy 组件实例依然正常 用于移除dom事件监听器、定时器

destroyed 组件销毁完成 data method 不可用

4.watch 与computed 的区别

1.执行顺序不同 先执行watch在执行computed

2.缓存不同 computed有缓存,只有依赖的数据改变时候,才会进行计算;watch没有缓存功能,只要监听数据变化,就会触发相应的操作

3.是否支持异步 computed不支持异步 watch是支持异步操作,适合监听路由和设置计时器等

5.v-for 没有key 会怎么样

没有key,vue无法跟踪每个元素的身份,只能替换整个Dom节点,那么每次数据发生变化,所有的Dom元素都会重新渲染,即使实际上只有少数元素发生变化,这样会导致性能下降

如果v-for 用于渲染的是组件,且没有提供key,那么将会导致组件状态消失,因为新的组件不会继承旧的组件实例状态

6.为什么data属性是一个函数而不是一个对象,具体原因是啥

一个组件被多次复用,就会创建多个实例,而实例用的是同一个构造函数;如果data是对象的话属于引用类型,当有一个值变化其他实例中的数据也会发生变化,为保证有独立的私有空间,所以以函数的形式返回。

7.有用过keep-alive吗,作用是啥

keep-alive 缓存不活动的组件

1.把不活动的组件实例保存在内存中,而不是直接销毁

2.是一个抽象组件,不会被渲染到真是dom中,也不会出现在父组件中

能缓存是因为2个钩子函数

actived 当组件激活会触发

deactived 当组件失活会触发

不添加keep-alive,组件不会被缓存,每次切换就会造成数据重新加载和页面重新渲染,造成不必要的性能消耗

include(白名单) 需要缓存的组件

exclude(黑名单) 不需要缓存的组件

8.vue的通信方式

image.png

9.vue的修饰符

image.png

10.Vue项目中如何引入第三方库

image.png

11.在Vue项目中你是如何做的SSR渲染(服务端渲染)

可以用vue团队开发的 nuxt框架 或者 安装 vue-server-renderer 库

nuxt 是一个基于vue.js的通用应用框架,也称为同构应用程序(Isomorphic Application),是指能够在服务端和客户端同时运行的应用程序

以上就是 CSR 和 SSR 的区别,那么我们为什么要使用 SSR 呢?

我们或多或少都听过 Vue 写的 SPA 应用 SEO 不太好,为啥不好呢?实际上我们去搜索引擎搜一个问题时,搜索引擎会去“爬取”所有相关的内容,然后对内容进行排序,而爬虫爬取的是 HTML,我们之前说过,SPA 应用服务器响应的一般是只有根节点的容器,里面的内容在完成数据填充后才有,爬虫爬不到东西,自然不会优先显示你的网页,而通过 SSR 响应的 HTML 是 完整的 ,很 利于爬虫的采集。

除此之外,由于 SSR 请求返回的 HTML 是完整的,我们无需发起别的接口请求,因此 首屏渲染 会比 CSR 快上许多。

12.Vue中$nextTick的作用,以及实现原理

$nextTick 的主要作用是在 Vue组件数据更新后,确保能够访问或操作更新后的 DOM 元素。它处理异步的 DOM 更新,以便在正确的时机执行回调函数,避免访问不准确或尚未更新的DOM.

底层原理实现:

nextTick利用JavaScript的事件循环机制来实现。当你调用nextTick利用 JavaScript 的事件循环机制来实现。当你调用nextTick 时,它会将回调函数推入一个队列中。Vue 在下一个事件循环周期(即 microtask 阶段)中执行这些回调函数,确保在 DOM 更新之后执行它们。这样,Vue 保证了回调函数在组件数据更新后执行,以便访问最新的 DOM 结构。

底层原理中,Vue 使用了Promise、MutationObserver或setImmediate 等浏览器原生 AP]来处理异步任务,具体取决于浏览器环境。这些机制都用于在下一个事件循环周期中执行回调函数,以确保 DOM 已经更新完毕。

总之,$nextTick 的底层原理是基于浏览器的事件循环机制,以确保在 Vue 组件的数据更新之后,正确地执行回调函数。这有助于解决异步更新导致的操作顺序问题。

13.vue2的初始换有了解吗,做了什么事情

1.创建一个新的 Vue 实例,并初始化数据和选项。

2.解析模板,将模板编译为虚拟DOM.

3.将虚拟 DOM 与真实 DOM 进行对比,进行 DOM 操作。

4.响应式更新,根据数据变化更新视图。

5.注册全局组件和全局混入。

6.执行钩子函数,如beforeCreate、 created.beforeMount、mounted 等

7.执行插件和指令等注册方法,

14.谈谈vue双向绑定

当 Vue 实例初始化时,会遍历数据对象的所有属性,通过Object.defineProperty()方法或Proxy 对象将它们转换为 getter和 setter。

当视图中的表单元素绑定了 V-model指令时,会将表单元素的value 与数据对象的属性进行绑疋。

当表单元素的 value 发生变化时,触发 input 事件。

input 事件被监听,Vue 会自动更新数据对象的属性值。

数据对象的属性值发生变化时触发 setter 方法。

setter 方法被调用,通知相关的视图进行更新。