由于v-for循环渲染出的就是上面input这样的dom元素相同，只是内容有些不同，所以当Vue重新渲染列表时，并不会修改每个dom，因为修改dom的重绘和回流时很耗时的，所以它会用元素来匹配数据项，就地更改元素，并且保证他们每个索引位置能正确渲染。 这样利用元素就地复用减少d…

一、DIFF算法的原理 1、在新老虚拟 DOM 对比时： 首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换 如果为相同节点，进行 patchVnode，判断如

OK，如果你不是特别清楚，那接着往下看吧，下面我们会拆开vue-loader的代码，看看SFC内容具体是怎么流转转换，顺便还能学学 webpack loader 的编写套路。 如代码第16行，定义pitcher对象，指定loader路径为 require.resolve('./…

微任务总是在宏任务执行前执行。所以，微任务更适合nextTick的场景。把nextTick回调中的脚本放到一个promise.then()中，就能保证是DOM更新后执行。 首先来了解一下JS的运行机制。 JS执行是单线程的，它是基于事件循环的。 所有同步任务都在主线程上执行，形…

最近在看一些底层方面的知识。所以想做个系列尝试去聊聊这些比较复杂又很重要的知识点。学习就好比是座大山，只有自己去登山，才能看到不一样的风景，体会更加深刻。今天我们就来聊聊Vue中比较重要的vue虚拟（Virtual ）DOM和diff算法。 Virtual DOM 其实就是一棵…

最近在看一些底层方面的知识。所以想做个系列尝试去聊聊这些比较复杂又很重要的知识点。学习就好比是座大山，只有自己去登山，才能看到不一样的风景，体会更加深刻。今天我们就来聊聊Vue中比较重要的响应式原理以及依赖收集。 Object.defineProperty() 和 Proxy …

最近在学习一些底层方面的知识。所以想做个系列尝试去聊聊这些比较复杂又很重要的知识点。学习就好比是座大山，只有自己去登山，才能看到不一样的风景，体会更加深刻。今天我们就来聊聊Vue中比较重要的异步更新策略及 nextTick 原理。 这段代码很简单，相信很多人都会说yes。当然也…

在开发项目过程中，通常会用到很多功能和设计相类似的组件，为了避免重复造轮子，我们经常会用到一些第三方组件，比如 vux，vant。但是这样会引入太多没用到的组件，造成打包体积过大。所以我们有必要封装一些基础的组件用于开发。 下面我为大家介绍如何封装vue的toast和dialo…

这几天 Vue 3.0 Beta 版本发布了，本以为是皆大欢喜的一件事情，但是论坛里还是看到了很多反对的声音。主流的反对论点大概有如下几点： 在我看来，Vue 黑暗的一天还远远没有过去，很多人其实并没有认真的去看 Vue-Composition-Api 文档中的 动机 章节，本…