Vue.js面试深度解析：数据绑定与响应系统

版权申诉

5星 · 超过95%的资源 2 浏览量更新于2024-07-07 收藏 1.76MB PDF 举报

"该资源是一份关于Vue.js的2021年经典面试题总结，包含答案，旨在帮助准备前端面试的开发者熟悉Vue的基础知识和深入概念，特别是Vue的响应式系统、双向数据绑定原理以及Object.defineProperty的局限性。" 在Vue.js中，核心概念之一是它的响应式系统。当创建一个Vue实例时，Vue会遍历`data`对象中的所有属性，并使用`Object.defineProperty`（在Vue 3.0中改为`proxy`）将它们转换为具有getter和setter的属性。这样，当属性被访问或修改时，Vue能够追踪依赖并通知相关的变化。每个组件实例都关联有一个watcher实例，watcher会在组件渲染过程中记录属性依赖。当依赖项的setter被调用时，watcher会被通知重新计算，从而导致与之相关的组件更新。 Vue.js实现双向数据绑定的关键在于数据劫持和发布-订阅者模式。首先，通过`Object.defineProperty`对数据对象进行深度遍历，为每个属性添加getter和setter。这样，任何对数据的修改都会触发setter，进而通知订阅者。其次，编译过程解析模板指令，替换模板中的变量，初始化页面视图，并将指令关联的节点绑定到更新函数，同时添加监听数据的订阅者。当数据发生变化时，订阅者会收到通知并更新视图。在这一过程中，watcher作为Observer和Compile之间的媒介，负责接收属性变更的通知，调用自身的`update`方法，执行Compile中绑定的回调，完成视图的更新。然而，`Object.defineProperty`存在一些缺点。对于某些操作，如通过索引修改数组元素或动态添加对象属性，这种方法无法拦截，因此不会触发组件的重新渲染。这是因为`Object.defineProperty`不能捕获这些非属性直接修改的操作。在处理数组时，Vue提供了如`push`、`pop`等变异方法来确保响应式更新，而对于动态添加的属性，开发者需要使用`Vue.set`或`$set`方法来确保新属性成为响应式的。这份面试题总结涵盖了Vue的基础和进阶知识，包括Vue实例化时的数据响应化处理、双向数据绑定的工作流程以及`Object.defineProperty`的局限性，这些都是面试中常问的问题，也是理解和掌握Vue.js技术栈的关键点。学习并理解这些知识点，对于提升前端开发者在Vue项目中的实践能力和面试竞争力至关重要。

2. 获取组件实例 key ，如果有获取实例的 key，否则重新⽣成。

3. key⽣成规则，cid +"∶∶"+ tag ，仅靠cid是不够的，因为相同的构造函数可以注册为不同的本

地组件。

4. 如果缓存对象内存在，则直接从缓存对象中获取组件实例给 vnode ，不存在则添加到缓存对象中。

5.最⼤缓存数量，当缓存组件数量超过 max 值时，清除 keys 数组内第⼀个组件。

（2）keep-alive 的实现

const patternTypes: Array<Function> = [String, RegExp, Array] // 接收：字符

串，正则，数组

export default {

name: 'keep-alive',

abstract: true, // 抽象组件，是⼀个抽象组件：它⾃身不会渲染⼀个 DOM 元素，也不会出

现在⽗组件链中。

props: {

include: patternTypes, // 匹配的组件，缓存

exclude: patternTypes, // 不去匹配的组件，不缓存

max: [String, Number], // 缓存组件的最⼤实例数量, 由于缓存的是组件实例

（vnode），数量过多的时候，会占⽤过多的内存，可以⽤max指定上限

created() {

// ⽤于初始化缓存虚拟DOM数组和vnode的key

this.cache = Object.create(null)

this.keys = []

destroyed() {

// 销毁缓存cache的组件实例

for (const key in this.cache) {

pruneCacheEntry(this.cache, key, this.keys)

}

mounted() {

// prune 削减精简[v.]

剩余74页未读，继续阅读

工具盒子

粉丝: 70
资源: 1311

Vue.js面试深度解析：数据绑定与响应系统

vue面试题（由易到难）

面试宝典 v2-新增Vue和React.pdf

2020年3月份最新vue面试题汇总一、

最新资源