Vue面试
coder_MX
懒 的去偷懒了
展开
-
Tree-Shaking (副作用)
接着上个帖子提出的疑问,我们深入研究一下为什么没有剔除foo函数。其实这里涉及到了Tree-Shaking中的第二个关键点—副作用。顾名思义,即一个函数的调用,可能对其他地方造成修改,那么在打包的过程中我们就不能将其剔除。这个时候又要有人说,这个foo函数仅仅时对对象的值进行了获取obj.foo,没有其他的修改。我们再一步深入,如果这个obj对象是一个通过Proxy代理的对象,读取它的属性就会触发该属性的get夹子,那在get夹子中会不会有造成其他变量的改变呢?原创 2023-10-24 15:36:36 · 176 阅读 · 0 评论 -
Tree-Shaking (自动剔除`dead-code`)
我们有一个demo工程文件内容分别是:上面是一个很直观且简单的例子,utils.js文件中导出了两个函数,分别是foo与bar,然后在input.js中导入了foo函数并执行。但是我们并没有导入bar函数。下面我们使用 rollup.js 进行构建:使用input.js作为入口,打包出来的文件为bundle.js我们不难发现,在最终生成的bundle.js中,我们没有发现utils.js中导出的bar函数,这是为什么呢?就是因为这块代码在至始至终都没有被使用到,所以它被当成被删除了。原创 2023-10-24 15:11:46 · 69 阅读 · 0 评论 -
框架的选择(运行时&编译时)
纯运行时框架:由于它没有编译的过程,因此我们没办法分析用户提供的内容。运行时+编译时:可以分析用户提供的内容,看看哪些内容未来可能会改变,哪些内容永远不会改变,这样我们就可以在编译的时候提取这些信息,然后将其传递给 Render 函数,Render 函数得到这些信息之后,就可以做进一步的优化纯编译时:也可以分析用户提供的内容。由于不需要任何运行时,而是直接编译成可执行的 JavaScript 代码,因此性能可能会更好,但是这种做法有损灵活性,即用户提供的内容必须编译后才能用##拓展纯编译时。原创 2023-10-23 20:49:50 · 119 阅读 · 0 评论 -
虚拟DOM的性能
到这里可能你还会有人讲,innerHTML的性能还是有可能优于虚拟DOM,那么,如果页面的元素数量级很高,如果还采取DOM销毁与创建,性能定然没有虚拟DOM好!使用innerHTML更新页面的的过程是**重新构建HTML字符串,再重新设置DOM元素的innerHTML属性,**那么这样将来,即使是我仅仅更新了一个元素中的一个文字,就等价于。这里我们从宏观的角度只看数量级上的差异。为了渲染出一个页面,首先要把字符串解析成了DOM树,这是一个涉及DOM的计算,因此,它的性能消耗远比Javascript大的多。原创 2023-10-23 19:40:12 · 50 阅读 · 0 评论 -
Vue组件data为什么必须是个函数而Vue的根实例则没有此限制?
Vue组件可能存在多个实例,如果使用对象形式定义data,则会导致它们共用一个data对象,那么状态变更将会影响所有组件实例,这是不合理的;米用函数形式E义,在Ehl不E在该嗯制,也是因为根实例只能有一个,不需要规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在担心这种情况。...原创 2022-02-11 17:34:19 · 431 阅读 · 0 评论 -
v-for和v-if谁的优先级高?应该如何正确使用避免性能问题?
v-for和v-if谁的优先级高?应该如何正确使用避免性能问题?原创 2022-02-11 17:18:16 · 240 阅读 · 0 评论 -
vue2.x中diff算法的总结
1. diff算法是虚拟DOM技术的必然产物:通过新旧虚拟DOM作对比(即diff),将变化的地方更新在真实DOM上;另外,也需要diff高效的执行对比过程,从而降低时间复杂度为O(n)。2.vue 2.x中为了降低Watcher粒度,每个组件只有一个Watcher与之对应,只有引入diff才能精确找到发生变化的地方。3.vue中diff执行的时刻是组件实例执行其更新函数时,它会比对上一次渲染结果oldVnode和新的渲染结果newVnode,此过程称为patch。4.diff过程整体遵循深度优先、.原创 2022-02-11 17:01:51 · 806 阅读 · 0 评论 -
Vue中computed与事件watch的区别
Vue中computed与事件watch的区别原创 2022-02-08 22:05:32 · 119 阅读 · 0 评论