面试 Vue 框架八股文十问十答第六期
相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!
⭐点赞⭐收藏⭐不迷路!⭐
1)v-if、v-show、v-html 的原理
- v-if: 基于条件判断,根据表达式的真假来添加或移除 DOM 元素,真则渲染,假则移除。
- v-show: 通过 CSS 的
display
属性来控制元素的显示和隐藏,通过切换display
的值来实现显示或隐藏,而不是添加或移除元素。 - v-html: 用于将 HTML 字符串插入到元素中,但要小心防范 XSS 攻击,确保插入的内容是可信任的。
2)v-if和v-show的区别
- v-if: 在条件为假时,元素不会渲染到 DOM 中,当条件为真时才会插入 DOM。因此,v-if 对性能有一定优势,但在频繁切换时有一定开销。
- v-show: 无论条件是真还是假,元素都会渲染到 DOM 中,只是通过 CSS 控制显示或隐藏。适用于频繁切换的场景,但可能在初始渲染时有一些性能开销。
3)v-model 是如何实现的,语法糖实际是什么?
v-model
是用于实现表单元素和组件之间的双向数据绑定。在表单元素上使用
v-model
,实际上是一个语法糖,它等价于同时绑定一个value
属性和一个input
事件。对于普通元素, v-model 的实现类似于:
<input v-bind:value="myValue" v-on:input="myValue = $event.target.value">
4)v-model 可以被用在自定义组件上吗?如果可以,如何使用?
v-model
可以被用在自定义组件上。当在自定义组件上使用 v-model
时,实际上是使用了一个 value
属性和一个 input
事件。可以将 value
作为组件的 props 传入,然后在内部触发 input
事件来更新 value
的值。
codeVue.component('custom-input', {
props: ['value'],
template: `
<input
:value="value"
@input="$emit('input', $event.target.value)"
>
`
})
然后可以使用该自定义组件并使用 v-model
进行双向绑定:
<custom-input v-model="message"></custom-input>
5)data为什么是一个函数而不是对象
在Vue中,组件中的data选项需要返回一个对象,但为何要将data定义为一个函数呢? 这是因为组件是可以复用的,如果将data直接定义为一个对象,在多个组件实例之间会共享同一个data对象,导致状态共享和数据混乱。而将data定义为函数,每个组件实例可以拥有自己的数据副本,避免了数据的共享。 函数形式的data选项会在组件被实例化时调用,每次返回一个新的data对象,确保每个组件实例都有自己的独立的数据。
6)对keep-alive的理解,它是如何实现的,具体缓存的是什么?
keep-alive
是 Vue 提供的一个抽象组件,用于缓存不活动的组件实例,以避免重复渲染。- 它通过内部的
include
和exclude
属性来决定哪些组件需要被缓存。 - 具体缓存的是组件的状态、DOM 状态以及它的实例。当组件被
<keep-alive>
包裹时,该组件的beforeDestroy
钩子将不会被调用,从而保留了组件的状态。 keep-alive
的实现基于 Vue 的抽象组件和组件生命周期的特性。
7)$nextTick 原理及作用
$nextTick
是 Vue 提供的一个方法,用于在 DOM 更新之后执行回调函数。- Vue 在更新 DOM 时是异步的,所以如果你修改了数据后立即想获取更新后的 DOM,可能会得到更新前的状态。
$nextTick
则会在下次 DOM 更新循环结束之后执行传入的回调函数。 - 原理是利用 JavaScript 的事件循环机制,将回调函数推入微任务队列,确保在下一个微任务执行时执行回调。
8)Vue 中给 data 中的对象属性添加一个新的属性时会发生什么?如何解决?
- 直接给
data
中的对象属性添加新属性时,新属性不会触发视图更新,因为 Vue 无法检测到属性的动态添加。 - 解决方法是使用
Vue.set
或this.$set
方法,它们可以用来在对象上添加新属性并确保触发视图更新。
Vue.set(object, key, value);
// 或
this.$set(object, key, value);
9)Vue中封装的数组方法有哪些,其如何实现页面更新
- Vue 提供了一些封装的数组方法,如 push
、pop
、shift
、unshift
、splice
、sort
、reverse
。这些方法会被重写以触发视图更新。 - Vue 使用 Object.defineProperty
或 Proxy
来监听数组的变化,然后派发更新。对数组的这些操作会触发对应的 __ob__
(Observer 实例)上的依赖通知,进而引发视图更新。
10)Vue 单页应用与多页应用的区别
Vue单页应用(Single Page Application,SPA)和多页应用(Multi-Page Application,MPA)是两种不同的前端应用架构。
1)Vue单页应用(SPA):
- 核心概念:SPA是指整个应用程序由一个单一的HTML文件加载,页面的切换通过动态地更新DOM来实现,而不需要重新加载整个页面。
- 特点:
- 前端路由:通过使用Vue Router等前端路由库,实现前端路由功能,不需要进行页面刷新或后端路由的请求。
- 组件化开发:将应用程序划分为多个可复用的组件,提高开发效率和代码可维护性。
- 异步数据加载:通过Ajax、Fetch或Vue的异步组件等技术,实现异步加载数据,提高页面加载性能。
- 前后端分离:将前端和后端进行解耦,前端通过API请求数据,后端只负责数据提供,提高开发效率和团队协作性。
2)Vue多页应用(MPA):
- 核心概念:MPA是指应用程序由多个独立的HTML文件组成,每个页面都是一个独立的应用程序,页面之间的切换需要进行整个页面的刷新。
- 特点:
- 分页跳转:页面之间的跳转通过链接的方式进行,每次跳转都需要加载一个新的HTML页面,页面之间的状态不会保留。
- 渲染模式:每个页面都有自己的独立的渲染过程,页面之间的渲染互不影响。
- 页面资源加载:每个页面都有自己的独立的资源加载过程,需要加载对应页面所需的脚本、样式等资源。
总结:
SPA适合具有复杂交互和动态内容的应用,能够提供更好的用户体验,但对前端技术要求较高,需要处理好路由、状态管理和SEO等问题。而MPA则适用于传统的网站应用,每个页面都是独立的,适合对SEO友好的场景,但页面切换较慢,用户体验较差。选择SPA还是MPA应根据具体需求和项目特点进行选择。
开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system
已 300 + Star!
⭐点赞⭐收藏⭐不迷路!⭐