携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
写在前面: 前两天有写过一篇关于vue面试题底层原理的文章,是B站杨村长的一些记录和笔记,今天是那一篇的延续,内容如下:
事关我对于Vue原理面试题的总结--续
v-for和v-if的优先级
vue2中,v-for的优先级高于v-if,因此是先把整个列表渲染完,再去判断v-if的条件, 而在vue3中则相反,因为v-if会判断一个还不存在的变量,因此会报错.
说说你对nexttick的理解
nexttick是指等待下一次dom更新完成.
vue有个异步更新策略,当数据变化的时候不会立即更新dom,而是开启队列进行存储组件更新函数,在同一事件循环中发生的所有数据变化会异步的批量更新
nexttick的使用场景
- created中想要获取dom的时候(还未挂载dom所以正常获取不到)
- 响应式数据变化后想获取最新dom结构
可以await nexttick() ,也可以在nexttick的回调函数中放入逻辑
watch和computed的区别及使用场景
- computed是返回一个具有响应式的值
- 所以,computed通常是组件数据衍生出一个新的数据,如总价和分别的单价,有个多对一的关系.
- 使用场景通常是简化模板中的复杂表达式,具备缓存特性,依赖项不变的时候不会重新计算值.
- 底层逻辑是响应式数据,vue2为defineProperty(主要是getter和setter),vue3为proxy,
- watch是观察监测变化,执行回调操作
- watch通常用来监测一个数据是否变化并执行逻辑,watch没有返回值,通常是传递一个函数里面包含如异步操作等复杂逻辑
- 参数包含hanlder(),deep,和immediate,分别为新值和旧值,是否深度监听,是否开始首次监听(页面一进来就触发)
- 底层逻辑是(听不懂)
父子组件创建和挂载的顺序
父bc -> 父c -> 父bm -> 子bc -> 子c -> 子bm -> 子m -> 父m
因为vue组件的创建过程是一个递归的过程,创建过程自上而下,挂载过程自下而上,类似U型的流程
什么是递归组件
如果一个组件,通过name属性不断的在自己里面调用自己,那这个组件就属于递归组件,在实际开发中,像tree和menu这样的业务组件,通常是递归组件,因为其本身结构相似且层级较多.
源码中有个resoleAssect函数,有个参数为maybeSelfReference,判断组件是否引用自己,如果是,则return自身
什么是异步组件
异步组件和异步路由的区别
表现形式: 大型应用中,通过异步路由(路由懒加载)的方式可以优化性能,让还没显示的页面懒加载,而异步组件则是更细粒度的切割和区分,当前页面还没加载的模块也会被懒加载.
底层实现:
- 异步路由指定的是一个函数,一个异步的loader,当vue-router发现你指定的不是一个对象(页面),而是一个loader(import函数),就会异步的去加载.
- 而异步组件是通过vue的defineAsyncComponents指定一个loader函数结合es6模块的动态导入实现的.
watch和watchEffect的区别
为什么用proxy代替defineproperty
End
