1. Vue 组件创建的流程源码分析
注册组件第二个参数默认会调用extend,Vue.extend 使用Vue基础构造器 产生子类
Vue.extend() 中data必须是一个函数，继承与Vue,可以new和挂载
Vue.component("",Vue.extend({})) //传入的是对象
这样复用了同一个对象所以改写为,这样new的时候可以拿到全新的对象
因为new Fn的constructor指向的是Parent，所以Sub.prototype需要重写
———————————————— 分割线 ————————————————————
所以在createElement，需要对组件进行处理（要区分组件和普通元素去创建虚拟节点）
判断是不是原始的标签 还是组件的方法
2. vue3.0(双向绑定)源码分析
vue3.0双向绑定相关的模块有reactive/effect/computed/ref，这篇文章主要聊聊我对它们的理解，以及我在编码中遇到的问题，希望能给大家带来帮助，首先，一张图清弊咐来分析它们之间的依赖关系。
把数据转化成响应式的数据，获取/修改数据时，能数据进行劫持操作。vue3.0用的ES6的proxy，在此之前用的是Object.defineProperty。这里有两个问题需要注意：1/proxy不会对子对象进行劫持，需要递归。2/新增数据时，set会执行两次，是因为length属性也进行劫持。
利用高阶函答纯数的思想，把effect弄成一个单独可用的函数体，在函数体内，执行回调函数并在外部进行一些逻辑处理。在effect文件中，还暴露了track/trigger。当effect中，存在依赖的数据，会调用reactive文件的get方法，get方法调用track，track函数会把storeEffect中的effect用一种格式存储起来。set方法会调用trigger，trigger会调用get存储的effect。
依赖effect当数据改变时，触发当卜举前的get回调函数，当获取返回值时，返回当前get回调函数的返回值，当设置时，触发set回调函数传递最新值。这里有点需要注意，这里的有个缓存机制，获取相同的值时，get回调函数值触发一次，通过dirty变量实现。
绑定一个非对象类型的数据，直接通过返回对象的get/set方法实现。
项目案例
3. vue源码分析三 -- vm._render()如何生成虚拟dom
我们在上一篇的最后讲解了vm._render是生成虚拟dom的关键，那么我们山铅来看看他是如何生成的，下面是他的源码
createElement在文逗历好件../vdom/create-element里面，下面是他的源码
new Vnode 创烂山建的是一个虚拟dom，其实就是一个装有很多属性的对象，和真实的dom做一个映射，目的是去渲染真实的dom，那么为什么不直接去渲染dom，因为vue中dom不仅有create的过程，还有diff,patch的过程。为了使得diff的过程花费的时间更短，虚拟dom就出来了，下面我们来看看new Vnode的源码
4. vue2.0源码解析（上）
vue项目亮雀地键键信址： https://github.com/vuejs/vue
当前版本号：2.6.11
1、基本稿轮目录结构：
1、找到initState()函数，这是初始化响应式的入口。
5. vue3源码解读--data响应式的处理
目录
vue2源码
vue3源码
示例
源码
上一节，我们已经看到了组件被挂塌塌载到页面的流程。但是忽略了对options的处理。vue2中是在组件init过程中就对配置项进行了合并处理，vue3中是在组件创建即setupComponent中执行applyOptions做的这个事情
经过对组件实例的解析操作，最终拿到的dataOptions即我们实例中的data函数。可以看到，在vue3已经不允许根组件定昌衫敬义为对象了
显然reactive即响应式实现的关键，顺着调用关系找到createReactiveObject函数。常听人提起的Proxy赫然立于耐慎眼前
proxy和Object.defineProperty差不多，都可以拦截对象的访问和修改操作，那么接下来的重点就是看下它是如何做依赖收集和派发更新的即可
当前targetType=1，使用baseHandlers做处理器，即createGetter函数。当组件render过程中将会触发msg的访问执行到此
可以看到，如果msg是一个对象，则会递归reactive。为什么要递归处理呢？proxy不是已经把整个对象都代理到了吗？
写一个例子看一下
如果正常访问，我没有问题的，每次都可以正确的触发get
如果是拿到返回值再进行访问的话，res.c就是无效的
把第二个值也转为Proxy后就可以了
回到正题，进入track函数
在trackEffects中完成依赖收集
同样的，当set newValue时将执行到createSetter。这将执行trigger进行更新派发
总结
拿到options的data--视情况(如对象递归执行)进行reactive化--在访问时收集依赖(ReactiveEffect)--设置值时派发更新
proxy.x相当于让activeEffect去订阅data的change，proxy.x = y则相当于data发布更新，通知activeEffect执行componentUpdateFn --观察者模式
6. 手把手教你读Vue2源码-2
在上一篇中，我们已经学习丛厅了怎么搭建环境和查找入口文件、vue初始化方法
这一篇，我们就来学习基本的调试方法，在上篇中，我们已经在test文件夹中创建了一个测试文件，亩虚我们在浏览器中打开这个文件
1. 初始化new Vue()
test1.html文件中在初始化app处打断点，按F11走下一步查看，可以看到进入到我们Vue构造函数，调用了init方法
2. this.init(options)
同样打上断点，点击下一步，会进入init方法
3. this.initMixin
在init方法，初始化了各种属性。我们将断点打在合并options的位置，查看一下options合并前后有什么差别：
4. $mount
继续，迅郑燃将断点打到mount方法
5. mountComponent
声明了updateComponent，创建了Watcher
6. _render()
_render获取虚拟dom
7. _update()
_update把虚拟dom转为真实dom
7. Vue到底是什么
vue是一个构建用户界面的框架(库),它的目标是通过尽可能简单的api实现响应的数据绑定和组合的视图集合。vue核心是关注视图层,因此它非常容易学习，非常容易与其它库或已有项目整合。vue在与相关工具和支持库一起使用时, 也能很好地驱动复杂的单页应用。
8. Vue源码系列之init过程属性方法变更图
本文主要扰哗消是总结在Core目录下出来的Vue在其实例vm，原型Vue.prototype，构造函数Vue上属性方法的变更情况，其中树形图从左到右为路径/
vue不但可以在web浏览器上运行，也可以在移动端运行，移动端也就是weex版本，两者区别如下图
在web上可以分为两个版本，runtime only版本和runtime+compiler版本，区别是后者缓知带有模板编译器，也就是可以将template模板编写html转换成render函数，而前者没有这个功能，需要写成render形式
另外在体积上，完整版比only版多了芦如差不多1/2，图中可以看到，vue.js/vue.min.js是完整版，后者是压缩完整版基础上的压缩版，而vue.runtime.js/vue.runtime.min.js是runtime only版
在源码中，完整版和only版入口不一样
这次走的是完整版入口
而在进入core之前，在runtime/index目录下，做出了下面的增添，也就是web版最外层的公共部分，以后就会在这基础上修改，从而使最终文件带有编译器或者不带编译器compiler
下图开始的就是core/index出来的vue上添加的属性和方法，分为属性/方法名+数据类型的组合，已经用不同颜色标记