AquamanTrident

在开发过程中，我们对这两个属性已经非常熟悉了：computed和watch。但是究其实现原理，或者说二者到底有何区别，以及什么时候使用计算属性，什么时候使用侦听属性，相信有不少朋友们仍存在疑惑。下面就一起来探讨一下： 关于计算属性的使用，见如下代码。 在初始化时（initSta…

前面的章节介绍了Vue.js是如何实现数据渲染和组件化的，主要是一个初始化的过程，并没有涉及到数据变化影响DOM变化的部分。而这也是Vue的核心之一。接下来我们就来探讨Vue如何实现数据发生变化重新对页面进行渲染的。 以上是一个简单示例，最初网页中显示Hello World，鼠…

在开发过程中，随着工程越来越大，为了减少首屏js包的体积，可以使用异步组件的方式。Vue.js 实现了三种方式：工厂函数、Promise、高级异步组件。 以上为使用工厂函数的方式加载异步组件的示例。接下来我们探讨整个过程是如何实现的，在_createElement中通过reso…

在Vue.js中，定义了一些内置组件（keepAlive、component、transition、transition-group、slot等），可以直接使用。除此之外，如果我们想使用一些自定义组件，必须要先注册组件，否则会报如下错误。 Vue.js 提供了2中组件的注册方式…

对于 Vue 的生命周期，可以阅读如下流程图（图中不包含activated、deactivated，这两个生命周期与keepAlive相关，会在之后系列文章中介绍）。本篇会从源码的角度分析 Vue 的生命周期函数都在什么时间节点执行以及做了什么。 Vue.js 定义了一个cal…

Vue.js 在初始化阶段，会执行一些配置的合并。将所有配置合并到$options上。主要分为外部调用场景下的配置合并（也就是执行new Vue()时）和组件场景的配置合并（也就是子组件初始化时）。 在外部调用场景中（new Vue()时），由于options._isCompo…

Vue.js 的另一个核心思想是组件化。所谓组件化就是将页面拆分成多个组件，组件之间资源相互独立，组件可以复用，组件之间也可以嵌套。 接下来以Vue/CLI初始化的代码为例，分析一下Vue组件初始化的过程。 本篇要从_createElement方法说起（_createEleme…

数据驱动作为Vue.js的核心思想之一，是指视图由数据生成，想要对视图做出修改时，不同于jQuery等前端库直接操作DOM，而是通过修改数据来影响视图。这样大大简化了代码量，在开发过程中只关心数据也使得代码逻辑变得非常清晰。如下： 最终会在页面上渲染出 Hello World。…

在上一篇中，我们讨论了Vue.js的构建过程，在web应用下，我们主要分析Runtime+Compiler版本的Vue.js，它的入口是src/platforms/web/entry-runtime-with-compiler.js。 最终我们找到instance/index.…