Vue2.0源码

Vue2.0源码

Vue2.0源码

带你深入了解Vue2.0底层原理，提升职场竞争力。

等 26 人关注共11篇文章创建于2021-05-10

1年前

✍Vue源码——学习如何判断数据类型

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

1691
43
评论

1年前

🚩Vue源码——如何深度收集渲染订阅者

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

950
44
4

1年前

🚩Vue源码——收集订阅者引起的性能问题

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

2222
59
10

1年前

🚩Vue源码——nextTick实现原理

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

1.3w
250
18

1年前

🚩Vue源码——订阅者的响应

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

1183
43
4

1年前

🚩Vue源码——订阅者的收集

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

1918
60
4

1年前

🚩Vue源码——如何监听数据变化

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

3939
58
2

1年前

🚩Vue源码——异步组件是如何使用

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

3663
65
5

1年前

🚩Vue源码——组件是如何注册和使用

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

1002
40
评论

1年前

🚩Vue源码——组件如何渲染成最终的DOM

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

1317
50
2

🚩Vue源码——组件如何渲染成最终的DOM