常见面试题
# 1.双向绑定
vue2:Object.defineProperty()
采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。本质是操作属性描述符。
vue3:Proxy
在目标对象架设一层“拦截”,当外界对该对象进行访问时,需要经过这层拦截,而Proxy充当这种机制,类似于“代理”的意思,可以在外界访问该对象前进行过滤和修改。本质给对象设置代理对象。
# 2.diff算法
是一种对比算法。对比两者是旧虚拟DOM和新虚拟DOM,对比哪个虚拟节点修改了,找出这个虚拟节点,并只更新这个虚拟节点所对应的真实节点,不用更新其他数据没发生改变的节点,实现精准更新虚拟DOM。目的是在生成新的DOM树,采用最少移动和创建的操作。
# 3.v-model
表单:
动态绑定了 input 的 value 指向了 messgae 变量,并且在触发 input 事件的时候去动态把 message设置为目标值
组件:
v-model 默认会利用名为 value 的 prop和名为 input 的事件
# 4.Vue-Router 的懒加载如何实现
- 方案一(常用):使用箭头函数+import动态加载
- 方案二:使用箭头函数+require动态加载
# 5.$route 和$router的区别
$route 是“路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数 $router 是“路由实例”对象包括了路由的跳转方法,钩子函数等。
# 6.组件的递归
前端组件的递归指的是在组件内部通过组件自身调用来实现递归的结构。这种递归的结构常见于需要展示树状或嵌套数据的组件,如菜单、树形结构、评论列表等。
例如,可以通过在表格的操作列中嵌套使用表格组件自身来展示嵌套表格或子表格,从而实现递归的效果。这样就可以在一个表格组件内部展示多层级的数据,实现更复杂的交互和展示需求。
# 7.组件的key作用
- 重用组件状态:当Vue在更新DOM时,会尽量复用已存在的组件实例,而不是销毁并重新创建。使用
key
属性可以指定唯一的标识符,帮助Vue确定哪些组件实例可以被复用。如果没有提供key
属性,Vue会默认使用组件的顺序作为标识符。 - 管理可复用的元素状态:在使用
v-for
指令渲染列表时,每个列表项都是一个独立的组件实例。使用key
属性可以确保Vue能够正确地跟踪和管理列表中每个元素的状态,以便在数据更新时进行高效的DOM操作。
上次更新: 2024/08/14, 04:14:33