你想要的 vue 源码分析 · 16
当数据发生变化的时候，触发 setter 逻辑，把在依赖过程中订阅的所有观察者，也就是 watcher 都触发他们的 update 过程，这个过程又利用了队列做了进一步的优化，在 nextTick 后执行所有 watcher 的 run，最后执行他们的回调函数 代码块 defineReactive dep.notify() subs.update(); queueWatcher flushSche…
最新文章
分类全部
标签全部
你想要的 vue 源码分析 · 15
响应式对象 getter 相关逻辑就是做依赖收集 首先定义了一个响应式对象，拥有 getter 进行读取数据的监听，在 getter 中会收集当前计算的 Watcher，然后把 Watcher 作为一个订阅者，在数据更改的时候会触发 setter。在 getter 之前会初始化一个 Dep 实例，这个 dep 实例会做依赖收集，Dep 实例是对 Watcher 实例的管理，Wacher 实例定义了…
你想要的 vue 源码分析 · 14
思考 实现效果：点击 div，修改 dom，背后隐藏的问题 修改哪块的 dom 修改效率与性能是否最优 是否每次的数据变化都要操作 dom 是否逐项去修改 dom 响应式对象的定义 vue2.x 实现响应式的核心是用了 ES5 的 Object.defineProperty(obj, prop, descriptor)，Object.defineProperty(obj, prop, descri…
vue3 为什么要用 Proxy 替代 defineProperty
vue2.x 中的响应式是基于 defineProperty 中的 descriptor，通过属性的 getter 和 setter 监听来实现 关于 defineProperty 和 Proxy 的原理与使用 之前有写了两篇博客 Object.defineProperty 的原理与使用 Proxy 的原理与使用 defineProperty 的响应式存在的问题 无法监听数组基于下标的修改和对于 …
你想要的 vue 源码分析 · 13
为了减少首屏加载时间，按需加载组件 源码 异步组件的公共方法 once 封装 ensureCtor $forceUpdate createAsyncPlaceholder 总结 异步组件的本质是两次渲染，第一次先渲染成占位符（注释节点），等待异步组件获取成功后，再通过 forceRender 强制重新渲染，生成异步加载的组件 0 delay 的高级异步组件第一次直接渲染成 loading 组件
你想要的 vue 源码分析 · 12
组件注册的使用场景有两种： , 全局注册 局部注册 局部组件与全局的组件的区别 全局组件是扩展到 Vue.options 下，所有组件创建的过程中，都会从全局的 Vue.options.components 扩展到当前组件的 vm.$options.components，这就是全局组件能在全局使用的原因，局部注册是注册在 Sub.option 扩展。
你想要的 vue 源码分析 · 11
mounted 为什么能够访问到 dom 如果是组件，是在 vnode patch 的 insert 钩子函数中执行，insert 是先子后父，所以此时的 mounted 执行实际也是先子后父 如果不是组件，vnode patch 了，最终成了真正的 dom，才会执行 两者的相同点是 vm._render()之后，vm._render()已经把 vnode 渲染成真实的 dom 了 生命周期的定义…
你想要的 vue 源码分析 · 10
合并配置 new Vue 有两个场景，一种是外部代码主动主动调用 new Vue(options)，另一种是组件内部通过 new Vue(options)实例化组件，无论哪种场景，都会用到_init(options)，首先会执行 merge options 的操作，组件内部通过 new Vue(options)实例化比外部主动调用 new Vue(options)要快，合并完的结果保存在 vm.$…
你想要的 vue 源码分析 · 09
patch patch 过程是深度遍历的过程，每次把正在激活的 vm 实例赋给 activeInstance，初始化子组件时把 activeInstance 作为一个参数传入：在 initLifecycle 拿到当前激活的 vm 实例，获取当前激活的 vm 的 parent，把当前激活 vm 实例 push 到 parent.$children中，vm.$parent 指向当前 vm 的父实例，i…
你想要的 vue 源码分析 · 08
组件化 组件化，把页面拆分成若干个组件，每个组件依赖的 css，js，模板，图片等资源放在一块，组件之间是相互独立的，可已复用与嵌套 组件 vnode 的创建什么时候执行 在 vm._update 中会调用_createComponent 方法，这个方法有一段代码是先判断 tag 是否是一个普通 div，如果是普通 div，那么会实例化一个普通的 VNode，否则就通过 createCompone…
你想要的 vue 源码分析 · 07
new vue 后生成真实 dom 的过程
你想要的 vue 源码分析 · 06
vm._update() _update 方法的作用是把 VNode 渲染成真实的 DOM，调用时期是首次渲染和数据改变，数据改变驱动视图变化。 vm._ patch 调用了 方法的返回值，因为把 VNode 渲染到不同平台的方法是不同的，所以使用了 createPatchFunction 进行函数柯里化，把差异函数提前固化，不同每次调用 patch 的时候传入 nodeOps 和 modules…
你想要的 vue 源码分析 · 05
vm._render 的实现 vm._render 最终是执行 createElement 返回 VNode 可以看出，vm._render 最终是执行 createElement 返回 vnode Virtual DOM 是 DOM 的一种抽象描述，是 js 对象，是生成几个关键属性：标签名、数据、子节点、键值等，其它属性都是都是用来扩展 VNode 的灵活性以及实现一些特殊 feature 的…
你想要的 vue 源码分析 · 04
vue $mount 的实现 vue 中是通过$mount 实例方法挂载 vm， 本质是把 template 和 el 转成 render 方法 转成 render 方法后，执行 mountComponent 本质是一个 new Watcher 的实现，当 vm 实例中监测到的数据发生变化的时候执行 updateComponent，进而渲染出 vm._render(vnode)
你想要的 vue 源码分析 · 03
如上例所示，vue 的核心思想是数据驱动，那数据怎么渲染到 DOM 中？ new Vue 发生了什么 initState initData getData proxy 总结 执行 new Vue 的时候，执行 initMixin 先对 options 进行合并，初始化得到 this.$options 然后执行一系列的init方法，其中有initState，在initState中 把this.dat…
你想要的 vue 源码分析 · 02
vuejs 源码学习第二天 这里用到的 vue 版本是 vue 目录 编译相关，把模版解析成抽象语法树 核心代码核心代码：1、内置组件，2、全局 API ，3、vue 实例化 ，4、观察者 5、虚拟 DOM 6、工具函数 不同平台的支持分别打包成运行在 weex 和 web 上的 vue.js 服务端渲染服务端渲染的代码 .vue 文件解析把.vue 文件解析成一个 javascript 对象 共…
你想要的 vue 源码分析 · 01
vue 源码学习第一天 vue 内部运行机制 new Vue()后有几个过程 初始化和挂载 初始化 初始化生命周期，事件，props，methods，data，computed 和 watch 等，最重要是通过 设置 和 来实现响应式和依赖收集。 挂载 $mount 会挂载所有组件，如果存在 template，需要进行编译 编译 编译分为三个过程 1.parse 2.optimize 3.gene…
已显示 17 / 37 篇文章
也可以浏览：全部文章档
确认评论邮箱
邀请制评论