你想要的 vue 源码分析 · 26
代码 执行 结果 参考 剖析 Vue.js 内部运行机制
最新文章
分类全部
标签全部
你想要的 vue 源码分析 · 25
优化一些不依赖响应式数据的 AST，具体是做了标记静态节点和标记静态根，如果是静态节点，DOM 永远不需要改变。这样标记的目的是对模版更新做性能优化 代码片段 入口 标记静态节点，静态节点的特点 是纯文本 普通元素有 v-pre 指令 没有使用 v-if，v-for，非 v-once 外的其他指令，非内置组件，是平台保留标签，没带 v-for 的 template 标签的直接节点，所有属性都是静态…
js 设计模式-工厂模式
什么是工厂模式 当去买一个 🍔 的时候，无须得到 🍔 的原材料，只需要获得到 🍔 对应工厂模式：不暴露创建对象的具体逻辑，将创建对象的方法封装到一个函数中，这个函数就是一个工厂 工厂模式按照抽象程度可以分为：1.简单工厂模式 2.工厂方法模式 3.抽象工厂模式 什么时候用工厂模式 对实例的封装，使用 new 操作符时候可以考虑用工厂模式 身边的工厂模式 $(selector) $()就是一个…
你想要的 vue 源码分析 · 24
解析模板，生成 AST 的过程 parse 的目的 把 template 解析成 AST,AST 是一个对象，parse 过程包括，从 option 中取参数，parseHTML，retrun rootElement parseHTML 对 template 进行正则匹配，每匹配到一个标签或属性都会 advance，并剔除已经匹配的字符串，在匹配的过程中，解析出开始标签，闭合标签，属性(attrs…
你想要的 vue 源码分析 · 23
编译方式 模版->真实 DOM 的渲染过程中,有把模版编译成 render 函数，这个过程就叫编译 vue 提供了两种编译方法：Runtime + Compiler 和 Runtime only Runtime + Compiler:如果在 vue 对象中用了 template，在运行中就可以编译的 Runtime only:在编译阶段把.vue 文件编译成 rener 函数 编译入口 $moun…
你想要的 vue 源码分析 · 22
图片来自： https://ustbhuangyi.github.io/vue-analysis/reactive/summary.html 核心去观测数据的变化，当数据变化以后，能通知对应的观察者，来实行相关的逻辑 Dep 的实现是最核心，实际上连接数据与对应观察者的桥梁 Vue 初始化的时候，对不同指令对应的属性做处理，对于 data 和 props，会通过 observer 和 define…
你想要的 vue 源码分析 · 21
响应式数据发生变化，触发渲染 watcher 的回调函数，进而执行组件的更新过程 组件更新过程 组件更新过程是新旧 vnode diff 的过程 新旧节点不相同：1. 创建新节点 2.更新父占位符节点 3.删除旧节点 新旧节点相同：1. 获取他们 children，根据不同情况做不同的更新逻辑 最复杂是新旧节点相同，而且都存在子节点，会执行 updateChildren diff 算法 源码 组件…
你想要的 vue 源码分析 · 20
watch 是基于 Watcher 实例实现的，是一个 user watcher，支持不同类型 watcher 的 4 个类型 deep watcher 为了监听对象的子属性的变化，所以在 watch 中设置 deep:true 属性，实际上会 触发 traverse 函数,traverse 函数是对对象做深层遍历，遍历就会触发子对象的 getter，这样就依赖收集，订阅子对象的 watcher，…
你想要的 vue 源码分析 · 19
computed 示例 初始化 computed watcher 实例的构造函数 执行 watcher.depend() 执行 watcher.evaluate() 去求值 computed watcher 依赖的数据变化后会触发 setter 过程，通知所有订阅它变化的 watcher，执行 watcher.update() computed 是什么 computed 实际上是一个 comput…
你想要的 vue 源码分析 · 18
之前有写了 一篇博客 ，给出了，通过数组下标给数组添加元素、修改数组长度或者直接对对象的属性的添加或删除，但是数据没变成响应式解决方法，并且讲解了为什么 vue3.0 不再使用 Object.defineProperty 而使用 Proxy 的实现依赖收集和派发更新原因 ，那么就从源码角度分析下，为什么上述操作对象或者数组，数据没有变成响应式的，但可以通过 Vue.set 或者 this.$set…
你想要的 vue 源码分析 · 17
什么是 tick js 引擎执行过程的运行机制 nextTick 是什么 数据从依赖收集到派发更新用到了 nextTick 机制，数据的变化到 DOM 的重新渲染是一个异步的过程，发生在下一个 tick nextTick 把要执行的任务都推到一个队列中，统一在下一个 nextTick 中执行 数据更改触发渲染 watcher 的 update，渲染 watcher 的 flushScheduler…
Promise 封装一个 messageBox
messageBox.vue index.js 在 main.js 中注册 如何使用
你想要的 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 开发技巧
vue 相关 http 相关 webpack 相关 less 相关 vue 相关 1. vue splice 数组，数据删除了，但是没有 patch 到 dom 中 splice 删除数组，数据确实改变了，但是 dom 没有删除，或者 dom 删除的位置不对 添加一个唯一的 key 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，V…
你想要的 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 的响应式存在的问题 无法监听数组基于下标的修改和对于 …
vue2.6 增加的特性
Scoped slots(作用域插槽)的新语法 动态参数指令 如果我们想在 v-bind or v-on 中使用动态变量，在 Vue@2.5.22 中： Vue@2.6.0 引入了一个新语法来动态创建参数指令 使用 Vue.observable()创建一个响应对象 之前，创建一个响应对象，必须在一个 Vue 实例中配置。现在我们可以在 Vue 实例外部，通过使用 Vue.observable(da…
vue-cli3 的配置文件详细介绍
如何启动 操作步骤 一开始只有两个选项: default(默认配置)、Manually select features(手动配置)和自定义模板，根据自己情况选择 根据你的项目需要来选择配置,空格键是选中与取消，A 键是全选 选择 css 预处理器 如果你选择了 Css 预处理器选项，会让你选择这个 是否使用路由的 history 模式：一般选择 no 选择 Eslint 代码验证规则：不勾这个->…
你想要的 vue 源码分析 · 13
为了减少首屏加载时间，按需加载组件 源码 异步组件的公共方法 once 封装 ensureCtor $forceUpdate createAsyncPlaceholder 总结 异步组件的本质是两次渲染，第一次先渲染成占位符（注释节点），等待异步组件获取成功后，再通过 forceRender 强制重新渲染，生成异步加载的组件 0 delay 的高级异步组件第一次直接渲染成 loading 组件
已显示 20 / 57 篇文章
也可以浏览：全部文章档
确认评论邮箱
邀请制评论