小鹿的博客

theme: v-greenhighlight: androidstudio前言数据响应式是什么？数据响应式是一种机制，能够侦测到数据的变化，然后响应这个变化到视图而Vue3设计理念是声明式(Declarative)开发,最大的好处：数据驱动，不用关心dom，只用关心状态数据Vue2和Vue3响应式的差别Vue2使用Object.defineProperty实现响应式Vue3使用Proxy实现响应式来看看两者的区别:Object.defineProperty:通过对某个属性的get.

theme: vuepresshighlight: androidstudio解决todo这一章我们来解决前面留下的部分todogetExposeProxygetExposeProxy方法 路径: core\packages\runtime-core\src\component.tsexport function getExposeProxy(instance: ComponentInternalInstance) { // 判断exposed是否存在 if (instance.e.

搭建验证环境这一章我们来验证前两章的分析首先，在packages/vue/expample下面新建一个文件index.htmlindex.html 路径: core\packages\vue\examples\init.html<div id="app"> <h1>{{title}}</h1> <p>someText</p></div><script src="../dist/vue.global.js"

分析mopuntConponent的三个方法前一章我们分析到了mountCompoent方法，其内部调用了三个方法:createComponentInstancesetupCompoentsetupRenderEffect现在来看看这三个方法createComponentInstancecreateComponentInstance方法 路径: core\packages\runtime-core\src\component.tsexport function createCompo

文章目录前言分析环境搭建1.获取源码2.安装pnpm3.修改package.json4.安装依赖5.dev打包怎么找入口在哪打断点运行断点createAppensureRenderercreateRendererbaseCreateRenderercreateAppAPIcreateAppAPI返回的createAppmountmount执行renderpatchprocessComponentmountComponet总结前言前不久，Vue3已经成为正式版了，因此打算将Vue3源码分析输出为博客，顺便

前言相信大家都知道，在vue2.0x中，使用数组下标改变值时，是不会触发响应式的以下来自:Vue官方文档Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength但是其实还是有特殊情况的，让我们来分析分析正常情况让我们看看，使用数组下标直接改变数组元素的值，是否会响应式变化(按照官方文档是不可行的)<div id="a

前言相信大家都在v-for中使用过key，脑海中也大概有印象，这个key写在这是为了提升性能的，但是再深一步问，这个key怎么就能优化性能呢？所以这就是今天的题需要探讨的点key的作用在Vue.js官方文档中已经给出了key的作用key这个特殊的属性，主要用于Vue的虚拟dom算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，

开启compile在分析完响应式原理后，让我们接着vue源码八()链接继续分析，上次说到，在$mount内部，在没有render函数的情况下，会将template进行一系列操作后，最后对这个template执行compileToFunctions操作，因此我们从compileToFunctions开始分析，compileToFunctions的查找这是来自src\platforms\web\entry-runtime-with-compiler.js Vue.prototype.$mount内部的/

前言看过很多讲响应式的文章，大多都是告诉你们，有Observer，Dep，Wathcer类，Object.definePorperty，先会触发get中的dep.depend收集依赖，然后数据改变时，会触发set中的dep.notify去通知Wathcer执行它的update方法，这样响应式就完成了这只能说是一个粗略的总结，如果我告诉你，Watcher的update方法其实只是一个调用其他函数的方法而已，它还会进行非常多的操作，其中还会涉及到异步更新的原由！这只是其中的一些小细节，Vue2.0x内部的响

今日达成：大纲准备完毕大纲准备花4天将这些整理完毕，分享给大家，因此下一期将在4天后！这里先把所有文件的注释奉上Object.defineProperty发布订阅模式Observer类方法构造函数内部实现数组和对象的响应式protoAugmentcopyAugmentarray.js 数组方法响应式walkobserverArraydefineReactive深层遍历 childOb = !shallow && observe(val)get方

今日目标：找到响应式文件（憋一发大的）路径：src\core\observer\index.js在之前提到过流程中，出现过许多次“将其添加到观察者中”、“将其响应化”、“通过defineReactive将其添加到观察者中”诸如此类的描述这些其实就是对vue响应式的描述，提到过这么久的响应式，今天将带领大家进入这神奇的世界，看看他的入口入口src\core\instance\state.js在initData中，可以看到最后通过Observe将data变成响应化observe(data, true

一段时间的总结今天就从new一个Vue实例开始，把一些过程捋一遍调试首先github上下载2.6.9版本的源码接下来就是怎么开启调试了：按照以下步骤来npm i 安装依赖(用cnpm yarn都可)// 因为vue是通过rullup进行打包npm install rullup -g 全局安装rullup打包工具// package.json 中修改scripts中的dev 加上--sourcemap"dev": "rollup -w -c scripts/config.js --envir

今日目标：state.js路径：src\core\instance\state.js今天就分析这十三个函数，任务艰巨！首先，有一个共享属性定义// 共享属性定义const sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, //空函数 set: noop}proxy作用：做一层代理，将app.data.name变成app.name这种类型，并会给其添加共享属性//

今日目标：inject.js 算是划水的一篇路径：src\core\instance\inject.js今天就分析这三个函数来自官方文档：provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。initProvideprovide，通常用来实现组件间通信，可以是对象或返回对象的函数，在src\core\instance\

今日目标：render.js 额外目标：$nextTick的异步路径：src\core\instance\render.js今天就分析这两个函数，有一个是测试用，咱不管initRenderinitRender最主要干了两件事：1、_c和createElement2、createElement 2、createElement2、attrs $listeners的响应化_c是由vue自带的complier编译解析的，而$createElement是我们自己写的render中的h函数然后就

今日目标：events.js路径：src\core\instance\events.js今天就分析这6个函数当然，我们这里没有按照初始化执行的顺序来，响应式那些还没提及，不急，慢慢来，之后我会将其全部连起来的。initEvents在_init中触发，在initLifeCycle之后触发，初始化事件队列以及监听器// 初始化事件export function initEvents (vm: Component) { // 初始化_events事件队列 vm._events = Ob

今日目标：lifecycle.js路径：src\core\instance\lifecycle.js今天就分析这9个函数setActiveInstance// 设置active实例export function setActiveInstance(vm: Component) { // 记录之前的activeInstance const prevActiveInstance = activeInstance // 将传入的赋给activeInstance activeInstan

主线和支线上次我们讲到src\platforms\web\entry-runtime-with-compiler.js，已经分析了这个文件，那只是帮助大家对源码难度有个大概的了解，今天的主线就是去寻找到vue的初始化文件，当然还会有几个支线。entry-runtime-with-compiler.js中引入的Vue在 src\platforms\web\entry-runtime-with-compiler.js 中第7行 我们可以看到引入了Vue，import Vue from './runti

目录今天开始，我将和大家一起探索vue源码，大家一起学习！首先去git下载一份vue，我这里是v2.6.9版本的，如果要跟着一起分析的话，推荐使用同一版本！刚下载的vue的目录结构是这样的dist是打包生成的各种版本的vue，分为AMD，UMD，CMD，以及CommonJS四种打包格式examples是一些测试用例flow 是vue2用来进行静态类型检查的，这里文件是对flow语法的支持types 是对ts的支持packages是一些单独切出来的包，像weexscripts 是关于打包