首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
Vue2源码学习笔记
小问_
创建于2022-07-08
订阅专栏
配以大量形象的图片,浅显易懂地描述,深入浅出分析学习Vue2源码的各功能模块
等 2 人订阅
共20篇文章
创建于2022-07-08
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
Vue2源码学习笔记 - 20.渲染与编译—createComponent 创建组件VNode
上一节我们研究了从 render 函数生成 vnode 的流程,这是通过 createElement 函数去实现的,那么在这其中遇到组件标签时,它实际又是调用 createComponent 函数去创
Vue2源码学习笔记 - 19.渲染与编译—createElement 函数
虽然我们多数时候只写组件的模板HTML字符串,但是有时候我们也需要手写 render 函数来渲染页面,这比模板更接近编译器。初始化时它省去了编译操作
Vue2源码学习笔记 - 18.渲染与编译—Vnode
这一节我们来研究学习下 VNode,这个类在 Vue 的渲染相关中经常遇到。Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM。请仔细看这行代码: createElement 到底会返
Vue2源码学习笔记 - 17.注册组件
组件是我们用 Vue 做开发时经常用的功能模块,虽然多数时候我们是写的单文件组件,有时候也说到局部组件和全局组件,其实它们的底层都是用的 Vue.component 函数进行的组件注册,这一节我们来详
Vue2源码学习笔记 - 16.响应式原理—更新调度
前面几节文章我们已经学习了响应式的整个过程,其中在派发通知环节,不管是什么类型的 Watcher,都会执行到 Watcher.update 方法,然后由它了决策接下来的处理,我们继续来学习它之后的流程
Vue2源码学习笔记 - 15.响应式原理—nextTick
这一节继续研究 nextTick,$nextTick 也是差不多用法,很多小伙伴应该都用过,我们看下官方描述: Vue.nextTick 与 Vue.prototype.$nextTick 都是调用
Vue2源码学习笔记 - 14.响应式原理—核心本质
经过前面几节的学习,我们已经了解了响应式原理中的几个重要知识,其中特别是 Observer、Dep 及 Watcher 类等。这一节我们整体串联起来描述响应式的整个核心过程和原理,所以强烈推荐先学习前
Vue2源码学习笔记 - 13.响应式原理—Watcher 类详解
继 Observer 和 Dep 类之后,我们迎来了这三个类中最复杂的类——Watcher。Watcher 这个词在 Vue 中有很多叫法:观察者、依赖者及订阅者等,我觉得它们的叫法都挺有道理。
Vue2源码学习笔记 - 12.响应式原理—Dep 类详解
我们继续学习 Dep 类,这个类在响应式中也是很重要的类,在实例化 Observer 类对象的时候就创建了一个 Dep 实例对象保存在 Observer 对象的成员变量中,这就是一对一的关系,也就是说
Vue2源码学习笔记 - 11.响应式原理—Observer 类详解
Vue 的响应式功能模块是一个庞大的模块,它涉及了很多其他模块、函数、算法及设计模式,当然,这句话也适用于描述 Vue 本身。在这其中,有几个关键的类,我们在此做简单的学习了解,后续我们仍会使用和研究
Vue2源码学习笔记 - 10.响应式原理一computed与watch浅析
这里我们只简单学习计算属性和侦听属性的初始化,后续响应式原理会继续深入研究学习这两个点的内容。它们形虽不同,但是本质都是依赖于 Watcher 类及与其他类模块。 Computed 计算属性的初始化
Vue2源码学习笔记 - 9.响应式原理一再看数据对象初始化
按应用实例化的流程,在学习完挂载渲染后,我们回过头来继续研究 Vue 对数据相关的初始化。在 _init 中是通过调用 initState(vm) 对数据相关的做初始化的,我们跟进去看看,它在文件 /
Vue2源码学习笔记 - 8.响应式原理一def、proxy及defineReactive函数
上一节我们学习了响应式的底层基础方法 Object.defineProperty,这一节我们来学习下 Vue 响应式相关中的几个重要函数:def、proxy 与 defineReactive。它们三个
Vue2源码学习笔记 - 7.响应式原理一基础
这一节开始我们来研究学习 Vue 的重中之重——响应式原理。响应式机制也是 mvvm 中的核心组成部分。Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript
Vue2源码学习笔记 - 6.实例的挂载渲染
在上一节学习了实例的 options 合并之后,按 new Vue 的初始化流程我们的重点应该是到 Vue 的数据初始化操作了,但是这个过程太庞大繁杂了,所以我决定把这个过程放在 Vue 的重点响应式
Vue2源码学习笔记 - 5.options选项合并
上一节我们学习了 Vue 应用实例的初始化过程,其中有很多细节仍需我们去研读,这一节我们就先来研究分析 options 选项的合并过程。 我们继续回到 _init 的代码段,它在文件 /src/cor
Vue2源码学习笔记 - 4.new Vue应用实例化
在上一节我们已经学习了 Vue 的类是如何定义的,这一节我们来学习一下 Vue 的实例化,就是我们经常写的创建 Vue 应用 new Vue。我们先在这里学习应用实例化创建的大致过程,对于过程中的诸多
Vue2源码学习笔记 - 3.Vue类的定义
在第一篇 前置准备 章节我们新建了一个 HTML 文件,里面引用并构建了一个简单的 Vue 应用。构建一个 Vue 应用是通过 new Vue 一个对象开始的,这一节我们先来看看 Vue 类是怎样定义
Vue2源码学习笔记 - 2.构建Vue
在上一篇的 index.html 中我们引用了 /vue/dist/vue.js 来构建一个应用,这个 vue.js 是 Vue 使用 rollup 来打包生成的,在源码目录中可以根据 package
Vue2源码学习笔记 - 1.前置准备
本笔记系列文章,我主要以 UMD 完整版的 Vue为主来学习,UMD 版可以通过<script>标签直接用在浏览器中,而完整版是同时包含编译器和运行时的版本,这样就便于我们直接修改代码打印一些调试信息