没有合适的资源?快使用搜索试试~ 我知道了~
首页2021年Vue高频面试题精华:深入理解双向绑定与原理
"本资源是一份关于2021年高频前端面试题的总结,专注于Vue框架部分。首先,我们探讨了Vue的基本原理。当一个Vue实例被创建时,它会利用`Object.defineProperty()`或在Vue 3.x中使用`proxy`,将data中的属性转换为getters和setters,这样可以实时追踪依赖并实现数据的自动更新。每个组件实例都有一个内置的watcher机制,负责在属性改变时通知组件更新。 双向数据绑定是Vue的核心特性,它是通过数据劫持和发布者-订阅者模式实现的。具体步骤包括:1) 遍历并设置setter和getter以监听数据变化;2) 编译模板指令,将数据绑定到视图,形成数据驱动的视图更新;3) Watcher作为观察者和编译器之间的桥梁,接收数据变化通知并驱动视图刷新;4) MVVM模型通过集成Observer、Compile和Watcher,实现数据与视图的双向绑定。 然而,使用`Object.defineProperty()`进行数据劫持也有其局限性,比如无法拦截对数组的索引操作或对象属性的新增,这些操作不会触发组件的重新渲染,因为这些操作没有触发表达式式的依赖变化。因此,开发者需要了解并适应这些限制,以确保在实际开发中处理数据操作时能够正确维护视图的同步更新。 这份资料对于准备Vue方向的面试者来说非常有价值,可以帮助面试者复习和理解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.]
render函数:
1. 会在 keep-alive 组件内部去写⾃⼰的内容,所以可以去获取默认 slot 的内容,然后根据这个
去获取组件
2. keep-alive 只对第⼀个组件有效,所以获取第⼀个⼦组件。
3. 和 keep-alive 搭配使⽤的⼀般有:动态组件 和router-view
// 去监控include和exclude的改变,根据最新的include和exclude的内容,来实时削减缓
存的组件的内容
this.$watch('include', (val) => {
pruneCache(this, (name) => matches(val, name))
})
this.$watch('exclude', (val) => {
pruneCache(this, (name) => !matches(val, name))
})
},
}
复制代码
render () {
//
function getFirstComponentChild (children: ?Array<VNode>): ?VNode {
if (Array.isArray(children)) {
for (let i = 0; i < children.length; i++) {
const c = children[i]
if (isDef(c) && (isDef(c.componentOptions) || isAsyncPlaceholder(c))) {
return c
}
}
}
}
const slot = this.$slots.default // 获取默认插槽
const vnode: VNode = getFirstComponentChild(slot)// 获取第⼀个⼦组件
const componentOptions: ?VNodeComponentOptions = vnode &&
vnode.componentOptions // 组件参数
if (componentOptions) { // 是否有组件参数
// check pattern
const name: ?string = getComponentName(componentOptions) // 获取组件名
const { include, exclude } = this
if (
// not included
(include && (!name || !matches(include, name))) ||
// excluded
(exclude && name && matches(exclude, name))
) {
// 如果不匹配当前组件的名字和include以及exclude
// 那么直接返回组件的实例
return vnode
}
const { cache, keys } = this
// 获取这个组件的key
const key: ?string = vnode.key == null
// same constructor may get registered as different local components
// so cid alone is not enough (#3269)
? componentOptions.Ctor.cid + (componentOptions.tag ?
`::${componentOptions.tag}` : '')
: vnode.key
if (cache[key]) {
// LRU缓存策略执⾏
vnode.componentInstance = cache[key].componentInstance // 组件初次渲染
的时候componentInstance为undefined
// make current key freshest
remove(keys, key)
keys.push(key)
// 根据LRU缓存策略执⾏,将key从原来的位置移除,然后将这个key值放到最后⾯
} else {
// 在缓存列表⾥⾯没有的话,则加⼊,同时判断当前加⼊之后,是否超过了max所设定的范
围,如果是,则去除
// 使⽤时间间隔最⻓的⼀个
cache[key] = vnode
keys.push(key)
// prune oldest entry
if (this.max && keys.length > parseInt(this.max)) {
剩余74页未读,继续阅读
工具盒子
- 粉丝: 68
- 资源: 1311
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 中国微型数字传声器:技术革新与市场前景
- 智能安防:基于Hi3515的嵌入式云台控制系统设计
- 手机电量低时辐射真增千倍?解析手机使用谣言
- 56F803型DSP驱动的高精度大功率超声波电源控制策略研究
- ARM与GPRS结合的远程监测系统设计
- GPS与RFID技术结合的智能巡检系统设计
- CPLD驱动的低功耗爆炸场温度测试系统设计
- 基于FPGA的智能驱动控制系统:可扩展设计与工业网络协议
- 基于ATmega128和CH374的嵌入式USB接口设计
- 基于AT89C52的温度补偿超声波测距仪:高精度设计与应用
- MSP430F448单片机在交流数字电压表中的应用
- 提升变频器应用效率的12项实用技巧
- STM32F103在数字电镀电源并联均流系统中的应用
- PSpice仿真下的升压开关电源设计:拓扑分析与CCM稳定性提升
- 轻巧高效:MSP430主导的低成本无线传感器网络节点设计
- FPGA在EDA/PLD中实现LVDS接口的应用解析
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功