Vue.js 框架源码与进阶

我自己的技术栈主要是vue，结合最近面试的问题，做一些面试总结，顺便复习一下！做个笔记，也希望大家不踩坑

「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」 数据响应式原理-依赖收集 依赖收集其实就是把依赖该属性的watcher对象添加到 dep 对象的 subs 数组中，当

「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」 模拟 VueRouter 的 hash 模式的实现 模拟 VueRouter 的 hash 模式的实现，实现思路和 H

「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」 Vue.js - 响应式 题解 前言 只要功夫深，铁杵磨成针 理论功夫再多也需要实践出真章，接下来，让我们进入实践环节

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」 patchVnode 接下来，我们要进行patch函数中最后一个函数patchVnode的代码解析了 作用 patch

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」 removeVnode 和 addvnodes 本章我们继续进行Snabbdom 源码解析篇章，我们的目标是 remo

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」 createElm函数 createElm函数的作用是把VNode节点转换成对应的DOM元素，把DOM元素存储在对象的

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」 调试 patch 函数 对于我这种菜逼新人，直接阅读源码感觉十分的吃力，如果可以一边调试一边对代码进行阅读的话就会轻松很

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」 patch 接下来我们要学习 VNode 渲染成真实DOM的过程，但是这个过程比较复杂，也是Snabbdom的核心，那么

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」 init 在我们之前使用 Snabbdom 简单Demo的时候都知道，我们需要调用 init 方法，返回patch函数，

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」 VNode 我们都知道 h函数 通过调用 vnode 方法创建了一个 VNode对象，并且返回了这个值，下面我们就来看这

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」 h 函数 通过上一章节 【Snabbdom 源码解析 - 开篇】 介绍的部分之后，我们就要正式进入代码的学习中了！ 我们

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」 Snabbdom 源码解析 接着我们开始学习 Snabbdom的源码 为什么要学习 Snabbdom的源码 A： 因为V

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」 Snabbdom中的模块 目标： 本章要介绍Snabbdom中的模块 前言 我们要从下面三个方面依次进行介绍： 模块的使

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。 什么是虚拟Dom 虚拟Dom很简单，就是用普通的js对象来进行描述dom对象，因为不是真实的dom，所以称之为虚拟do

前言 本章要进入到 Watcher 类的实现了 Watcher 类 功能 当数据变化触发依赖， dep 通知所有的 Watcher实例更新视图 滋生实例化的时候往 dep 对象中添加自己 结构 vm

前言 首先我们先看看以下的脑图 目前我们已经实现了 vue、Compiler、Observer类 本章我们要实现 Dep（发布者）类 Dep 功能 收集依赖，添加观察者(Watcher) 通知所有观察

前言 接下来 我们进入到Complier类的实现 Compiler 功能 负责编译模板，解析指令/差值表达式 负责页面的首次渲染 当数据变化后重新渲染视图 结构 判断元素属性是否指令 这里判断很简单我

前言 接上回书说到，我们实现了几个小点之后，我们要开始实现Observer类了 Observer 功能 负责把data选项中的属性转换成响应式数据 data中的某个属性也是对象，把该属性转换成响应式数

前言 我们先来了解一下Vue类 功能 负责接受初始化的参数 负责把data中的属性注入到Vue实例中，转化成getter/setter 负责调用 observer监听data中所有属性的变化 扶着调用