Vue2 源码阅读解析

当我们通过new Vue()的实例挂载后，会替换对应挂载的DOM节点。现在我们通过源码的角度分析其背后的实现主流程。 现在我们来看看Vue构造函数的定义。它定义在src/core/instance/index.js中： 可见Vue是一个接收option配置对象的构造函数。下面各…

组件化是Vue的核心概念，它让我们提取可复用的模版和脚本，在需要用到的地方插入对应的组件标签。那Vue是怎么把组件渲染成真实的DOM的呢，它和我们渲染普通的HTML有啥区别？我们在上篇文章中实例插入一个组件，通过源码分析组件怎么渲染？ 从上篇分析new Vue()的主流程后，我…

当我们使用Vue的动态组件或者路由切换组件时，如果想要保存之前显示组件的状态，可以利用keep-alive内置组件包裹。现在通过源码来看看它的实现。 这个组件和我们平时写的组件不同的是多了一个abstract: true，表示这是一个抽象组件。抽象组件的实例是不会维护它的父子关…

当影响页面的数据发生改变，以往我们需要手动操作DOM来显示最新视图。通过Vue编程，我们只需重点关注数据状态的逻辑处理，Vue会帮我们自动完成视图的渲染工作，这就是Vue的数据响应式机制。现在，我们通过源码来看看Vue的响应式原理。 在看源码之前，应该要对Vue的响应式原理有个…

在Vue的每个组件都有一个渲染watcher，它会被模版用到的数据作为依赖收集，在状态发生变化时，会通知该watcher，从而使组件重新执行render和patch，最后渲染最新的视图。组件中除了渲染watcher之外，还有计算属性computed和监听属性watch，它们在V…

我们之前分析Vue实现组件化挂载的源码分析，知道了组件是怎么一步一步创建到挂载到真实的DOM中。现在，我们结合Vue的响应式原理，看看当状态发生变化时，组件是怎么进行更新操作的。 其实，Vue的虚拟DOM的更新是模仿snabdom实现的，对于两个节点的对比过程基本一样。所以对于…

Vue允许我们在模版上用v-on或@为元素添加DOM事件，并且可以为组件元素添加自定义的事件。现在通过源码角度看看Vue是怎么处理事件的绑定和执行的。 上面例子利用模版的形式给对应的元素和组件绑定事件。首先，Vue会编译模版，会把元素的事件和组件的自定义事件都放在on对象上，把…

在Vue中我们可以用v-model指令来使表单的值和状态进行双向绑定，当表单的值改变时绑定的值也会变化。其实，v-model是Vue提供的props和事件的语法糖，现在我们通过源码分析下这其中的原理。 对于v-model和其他指令一样，在模版的编译解析阶段会走src/compi…

Vue允许我们为组件自定义子模版，这部分内容会替换组件模版中slot标签，这就是插槽。那么子组件在渲染过程中是怎么获取到父组件对应的插槽模版的，现在就通过源码来分析。 在父组件的编译解析阶段，会在src/compiler/parser/index.js的processSlotC…

前端路由是构建单页面应用的关键技术，它可以让浏览器URL变化但是不请求服务器的前提下，让页面重新渲染出我们想要的结果。Vue-Router是Vue应用的前端路由插件，让我们来看看它的实现原理。 Vue为所有插件提供一个Vue.use()来安装注册插件，这个方法会调用插件导出对象…