Vue2.0源码

Vue 框架作为一个成熟的框架，里面有很多值得去学习、借鉴、使用。本专栏主要学习 Vue 中如何判断数据类型。 到 ECMAScript 10 为止，规定了 8 种 数据类型，又把数据类型分为原始类型和对象类型。 | Null | 只包含一个值：null。| | Undefin…

本专栏是由一个问题引起，如果你已经知道答案了，可以忽略本专栏。 为什么执行 this.a.c.d = 2 后页面会刷新成如上图所示。或许你从这篇专栏中得知。在 Vue 挂载过程中，数据 this.a 收集了渲染订阅者。当执行 this.a.c.d = 2 后，数据 this.a…

在这篇专栏中详细介绍了订阅者的收集过程，但是漏掉当发布者的值是对象或数组时是如何收集订阅者的介绍，其收集过程可能会引发性能问题。当然这不是 Vue 本身的问题。 在这篇专栏中介绍过，当读取数据时会触发 getter 函数，在 getter 函数中收集订阅者。而 getter 函…

在上一篇专栏讲到订阅者的响应是先把订阅者添加到一个队列，然后再 nextTick 函数中去遍历这个队列，对每个订阅者进行响应处理。大家所熟悉的 Vue API Vue.nextTick 全局方法和 vm.$nextTick 实例方法的内部都是调用 nextTick 函数，该函数…

在上篇专栏中介绍了发布者是如何收集订阅者（Watcher），本专栏来详细介绍发布者发生变化后，如何通知订阅者，而订阅者是如何响应。 在 Vue 中发布者一般是数据，当数据发生变化了会触发数据 setter 函数，其定义在 defineReactive 函数中。 可以看到在 se…

在上篇专栏中详解介绍了数据的监听过程。那么当监听到数据发生变化后又是如何通知视图更新，在 Vue 中是采用发布者订阅者这个设计模式来实现这个功能。其中发布者就是数据，订阅者就是 Watcher，另外还使用 Dep 来专门收集并管理订阅者，而订阅者还分为三种类型：render W…

Vue 是用数据来驱动来生成视图的，当数据发生改变时视图也跟随改变。要实现这个功能，首先要能监听到数据的变化，然后才能在数据发生变化时通知视图做出对应的改变。数据可分为对象类型和数组类型，其监听的过程是不一样的。 回想一下，在 Vue 开发过程中，当改变 props 、data…

在上一篇🚩Vue源码——组件是如何注册和使用中，详细介绍了组件注册和使用的内部逻辑流程，里面所介绍都是同步组件的注册和使用。但是在实际开发中，异步组件才是经常使用的。先来看一下，官方文档中是如何注册异步组件，可以分为三种方式。 从以上示例中可以看到，通过Vue.compone…

在上一篇 🚩Vue源码——组件如何渲染成最终的DOM 中详细介绍了在 Vue 中组件如何渲染成最终的 DOM。而在 Vue 中，除了它内置的组件如 keep-alive、component、transition、transition-group 等，其它自定义组件在使用前必须…

Vue有两个核心思想，一个是数据驱动，简单来说就是通过模板和数据渲染成最终的 DOM ，具体是如何实现在上一篇🚩Vue源码——模板和数据如何渲染成最终的DOM中详细地介绍过了。 另外一个是组件化，谓组件化，就是把一个页面拆分成多个组件，这些组件是独立的，可复用的，可嵌套的，等…