- 综合排序
- 最热优先
- 最新优先
- 来自专栏全栈修炼
推荐 7 个 Vue2、Vue3 源码解密分析的重磅开源项目
Vue2 Vue 虽然出到 Vue3 了，也出了不少 Vue3 的源码教程，但是 Vue2 还是很棒的框架，它的源码还是值得细读的，所以先推荐几个 Vue2 的源码项目。 2.1 vue-analysis Vue.js 源码分析 目前社区有很多 Vue.js 的源码解析文章，但是质量层次不齐，不够系统和全面，这本电子书的目标是全方位细致深度解析 Vue.js 的实现原理 https://github.com/answershuto/learnVue 2.5 vue Vue 源码逐行注释分析 +40 多 M 的 Vue 源码程序流程图思维导图 （diff 部分待后续更新 这个 Vue 源码逐行分析，我基本每一行都打上注释，加上整个框架的流程思维导图，基本上是小白也能看懂的 Vue 源码了。 https://github.com/qq281113270/vue 2.6 vue2.0-source Vue 源码分析 -- 基于 2.2.6 版本 该源码分析，会带着大家一起学习 Vue 的大部分代码
3K20编辑于 2023-03-15 - 来自专栏coding个人笔记
vue nextTick源码
早之前有分享过vue的nextTick的使用，当时说当数据发生变化，更新后执行回调没有实现，那时候也不知道怎么测试的，其实nextTick方法只是做了一步异步。 先明确一下，修改数据、渲染页面，在vue里面都是同步的，包括生命周期，也是同步执行，而nextTick是用异步的回调，所以才能获取最新的dom或者实例属性。 上源码，然后使用一下。 上面是vue nextTick的源码，讲真，看别人源码还要去看一些api，然后分析为什么这样写，看着代码看明白了，一关上，就一点写不出来。 （完）
52420发布于 2020-09-14 - 来自专栏LuckySec网络安全
Vue 源码泄露
大部分Vue应用会使用webpack进行打包，如果没有正确配置，就会导致Vue源码泄露，可能泄露的各种信息如API、加密算法、管理员邮箱、内部功能等等。 0x02 漏洞检测 Vue项目源码在泄漏的情况下，可以在浏览器控制台中的Sources—> Page—> webpack://中查看源代码 使用webpack打包Vue应用会在网站js同目录下生成 js.map 直接查看网站的js文件，可以在末尾处有js.map文件名 直接在当前访问的js后面拼接.map即可访问下载 通过以上两种方式可以判断目标网站存在Vue源码泄露问题 0x03 漏洞利用 在某些情况下， 不能直接在浏览器控制台中的Sources—> Page—> webpack://中查看到Vue源码，但是网站上存在js.map文件，我们可以通过一些工具将js.map中的内容进行还原Vue源码 1. reverse-sourcemap webpack中 接着就可以对Vue源码进行分析审计了 2.
6.4K60编辑于 2022-11-02 - 来自专栏技术社区
源码解析——VUE
Vue源码解析 vue使用Object.defineProperty+观察者模式对数据和模板进行绑定，对于数据来说需要进行更新时，即会触发对应的getter和setter函数，在setter函数中，即可根据对应收集到的依赖 对于一次收集和一次更新来说，大致流程如下： 实例化vue之后，对内部所有的data进行劫持 处理对模板的编译/或者静态编译好的render函数，在处理绑定的变量时，创建watcher 同时获取当前模块对应的初始值 ，在读取触发数据局的getter函数，进行绑定 绑定成功后，后续触发setter，根据记录的watcher，即可更新所有的模块内容 当然对于模块的编译来说，有运行时编译、静态编译多种形式，同时对于vue 来说，vue@2使用了VNode来对模块内容进行了描述，所以在模块编译的流程中，使用VNode能更好的提升编译和更新的性能。 编译模块 Compiler 数据处理 Observer 依赖收集 Watcher/Dep 节点VNode/patch更新 对于通用性的理解来说，vue@2和vue@1并没有太多区别，更多的核心在于VNode
26830编辑于 2022-06-16 Vue 源码分析
那个你心心念念的 Vue "源码分析"。 Vue 3 源码解析Vue 2 源码解析 值得一阅的 Vue 源码解读Vue 源码学习用一张思维导图总结了 Vue | Vue-Router | Vuex 源码与架构要点Vue.js 核心源码解析从零手写 Vue 3 源码跟尤雨溪一起解读 Vue 3 源码Vue 源码逐字分析温馨警告：你对数据的访问和更新，可能已被 Vue 劫持！
18310编辑于 2024-08-19- 来自专栏技术工具的探究
Vue源码再读
Vue3.0Beta版本已经上线，听了Evan在bilibili上的最新的介绍，特性不多（高频用法Proxy、Reflect），但想和Vue2.x版本做个对比，决定再读一下2.x源码，本文主要用代码截图和自己的理解图介绍 ---- 主要从以下关键点入手 vue源码地址：https://github.com/vuejs/vue.git 1 调试环境 1.1 添加sourcemap # package.json->scripts /vue/examples/commits/index.html image.png 2 初始化过程 2.1 从调用栈看执行过程 好了，你可以按F11逐步跟进查看源码，下图是我的调用栈跟进信息 根据下图 ,{staticClass:"commit",attrs:{"href":record.html_url,"target":"_blank"}},[_v(_s(record.sha.slice(0, 7) 还是很小巧的，之后再来阅读一下vue3.0代码看看区别
1.8K300发布于 2020-04-29 - 来自专栏睡不着所以学编程
Vue笔记(7) 很长
⊙ loader ⊙ ES6转ES5 作用域插槽 一句话来说就是: 父组件替换插槽的标签,但是内容由子组件来提供 现在做这个案例: 搭建好基本的结构 那么此时我想在vue bundle文件,会发现里面还是ES6语法,那么对于一些还支持ES6的浏览器来说,就会出现问题.这个时候需要使用babel npm install --save-derv babel-loader@7 file-loader: npm install file-loader@2.0.0 --save-dev babel: npm install --save-derv babel-loader@7
87720编辑于 2022-09-20 - new Vue 只有在keyCode 是 13 是调用 vm.submit() <input v-on:keyup.13="submit"> // 记住所有的 keyCode 比较困难， 所以Vuevar example2 = new Vue ({ el:'#example-2', data: { name: 'Vue.js' }, ')">Say hi</button> <button v-on:click="say('what')">Say what</button>var example1 = new Vue example-2"> <butto v-on:click="greet">Greet</button>来自专栏柠檬先生
VUE 入门基础(7)
counter += 1">增加1</button>
这个按钮被点击了{{ counter }} 次
spring源码分析7
spring源码分析7 强烈推介IDEA2020.2破解激活，IntelliJ 原文链接：https://gper.club/articles/7e7e7f7ff3g5agc4
【Vue 源码解析】Vue实例挂载过程
源码解析 首先找到vue的构造函数 源码位置：node_modules/vue/src/core/instance/index.js（ps：找不到可以在node_modules目录下搜索，因为懒惰后边就不写 (Vue); // 定义 _render 返回虚拟dom 首先可以看initMixin方法，发现该方法在Vue原型上定义了_init方法 源码位置：src\core\instance\init.js $mount方法 initState方法是完成props/data/method/watch/methods的初始化 源码位置：src\core\instance\state.js export function $mount方法 源码位置：/src/platforms/web/entry-runtime-with-compiler.js Vue.prototype. 初始化时声明的render，update方法 render的作用主要是生成vnode 源码位置：src\core\instance\render.js // 定义vue 原型上的render方法 Vue.prototype
【Vue原理】Vue源码阅读总结大会
专注 Vue 源码分享，为了方便大家理解，分为了白话版和 源码版，白话版可以轻松理解工作原理和设计思想，源码版可以更清楚内部操作和 Vue的美，喜欢我就关注我的公众号，好吧兄弟，不会让你失望的 阅读源码是需要很多的勇气的 ，特别是对这种 Vue 源码的框架，十分抽象，使用了好多设计模式，封装得十分精密。 6、NextTick ，延迟执行回调 7、Render， 渲染机制 8、LifeCircle ，生命周期 9、Model ，双向绑定 10、Event ，事件机制 Vue 组件选项 1、computed 2、filter 3、mixin 4、directive 5、slot 6、props 7、watch 我就大约以这些为我的学习目标进行 源码阅读的，每一块都是一个非常大的内容，每一块内容都不是几天能看完的 而我也打算自己出一个Vue 源码系列，算是把自己的阅读心得再二次总结如果你也有兴趣跟我一起阅读源码，就加入我吧，关注我的公众号哦，文章排版会好看很多
Vue 3 源码导读
话不多说，我们趁热对 Vue 3 源码进行一些简要的分析。 如果你还没有阅读过 Composition API RFC，可能无法完全看懂下面的内容。 如果你还没有学习 TypeScript，请尽快学习，否则可能看不懂源码。 另外有件事情说出来可能会让你非常惊讶，Vue 3 的源代码完全没有使用 class 关键字！ @vue/runtime-core 模块 大部分 Vue 开发者应该不会用到这个模块，因为它是专门用于自定义 renderer 的。 /runtime-dom' 阅读建议 我兴奋地立刻把 Vue 3 源代码扫了一遍，发现其 TypeScript 代码结构清晰，非常好读，于是我写了一篇《Vue 3 源码导读》，点击下方的「阅读原文」即可查看全文 我没有直接把文章内容复制过来，是因为微信后台的编辑器实在太垃圾啦 :) 强烈推荐大家用假期这段时间把 Vue 3 的源码通看一遍，因为目前的代码结构清晰，而且代码量相对较少。
Vue源码探秘（一）
引言 Vue作为当前前端开发中比较重要的框架，在企业级开发中应用十分广泛。目前也是我的主要技术栈之一。在接下来的系列文章中，我将带大家一起探秘Vue.js底层源码。 本篇文章是Vue源码探秘的第一篇。在这一篇中，我主要是带大家做一些准备工作，介绍一下flow、源码目录和源码构建流程。 Vue.js 的源码利用了 flow 来做静态类型检查，所以了解 flow 有助于我们阅读源码。 ? vue.js源码目录设计 Vue.js的源码都在src目录下: ? vue.js 源码构建 了解Rollup Vue.js 源码使用 Rollup 构建。Rollup 和 Webpack 都是打包工具，但两者的应用场景不同。
vue源码解读（二）
new Vue发生了什么 来看源码，在/vue/src/core/index.js中 function Vue (options) { if (process.env.NODE_ENV ! (this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword // 缓存了原型上的$mount const mount = Vue.prototype.$mount // 重新定义该方法 Vue.prototype. 无论是用单文件.vue方法开发组件，还是写了el或者template属性，都会转换成render方法。这个过程是个Vue的在线编译的过程，它是调用compileToFunctions方法实现的。 $vnode 表示Vue实例的父虚拟Node,所以则表示当前是根Vue的实例 if (vm.$vnode == null) { vm.
【vue】nextTick源码解析
1、整体入手 阅读代码和画画是一样的，忌讳一开始就从细节下手（比如一行一行读），我们先将细节代码折叠起来，整体观察nextTick源码的几大块。 折叠后代码如下图 ? 2、逐行解析 看完大的代码块结构后，可以按照js引擎解析代码的顺序来分析源码了。前边的变量和函数声明看完后，就到解析if语句了。 不过这都是该属性的用法了，VUE关于nextTick的源码里关于这个属性没用到callback的这俩参数。 所以，vue这里做了容错，先判断MutationObserver的类型是否为“undefined”，来检查浏览器是否支持该特性。 源码里，nextTick等于一个立即执行函数，函数执行完毕return一个匿名函数如下，也就是说，下边的代码就是我们调用nextTick的时候调用的函数。
vue源码分析-从new Vue开始
,可见Vue是暴出来的一个一个功能类函数，我们进入源码一探究竟：import Vue from '. (Vue) // Vue.mixin initExtend(Vue) // Vue.extend initAssetRegisters(Vue)}可见暴露出多个方法给全局，而Vue.util是一些工具方法 default Vue我们可以看到initMixin(Vue)执行了，那么我们去读一下init的源码：参考Vue3源码视频讲解：进入学习import config from '.. $options.el) } }}阅读init.js源码之后，我们可以看到其实就是这样一个顺序：option参数renderProxy代理vm的生命周期相关变量初始化vm的事件监听初始化vm的状态 对象会导致多个相同的组件持有同一个data对象的引用 * 而使用一个返回新对象的function就可以避免这个问题 * 详见 https://cn.vuejs.org/v2/style-guide/#%E7%
分享 7 个在 Vue3 源码中学到的实用开发技巧
来源 | https://javascript.plainenglish.io/7-super-useful-utility-functions-i-learned-from-vue3-adc6c93067b 在本文中，我将与您分享7个我在 Vue3 中学习到的一些实用功能小技巧，我把源码放在这里。 isIntegerKey('010')); // false console.log(isIntegerKey('3.0')); // false console.log(isIntegerKey('Vue 7、获取当前环境的全局对象 let _globalThis: any; const getGlobalThis = (): any => { return ( _globalThis ||
vue源码解读（一）
sfc 将.vue文件内容解析为一个javascript的对象。 shared vue.js定义了一些方法。可以被浏览器端的vue.js和服务端的vue.js共享的工具方法。 源码构建 在项目根目录下package.json文件中script配置如下： { "script": { "build": "node scripts/build.js", "build _init(options) } initMixin(Vue) stateMixin(Vue) eventsMixin(Vue) lifecycleMixin(Vue) renderMixin(Vue (Vue) initAssetRegisters(Vue) } 在这里给Vue扩展了一些全局方法。 如Vue.nextTick ,Vue.set... 到现在vue的初始化过程基本即完成了。
源码解析：ThreadPoolExecutor（7）
五、源码解析—— getTask() getTask的代码逻辑并不复杂，关键注释我也已经写在源码上了，大家看一下就会理解的： 【解释】 在第二个红框处，我们就找到了keepAliveTime的身影 如下所示： ---- 六、源码解析—— reject(Runnable command) 最后关于拒绝策略这块，其实没什么好说了，最终调用的就是handler的rejectedExecution方法 而RejectedExecutionHandler handler的四个实现类，就如截图所示： ---- 七、结束语 到此，线程池的源码解析也就告一段落了。 ---- 八、附录：阅读源码所需的部分线程知识点 8.1> interrupt()、interrupted()和isInterrupted() public void interrupt() 其作用是中断此线程 ---- 源码解析：ThreadPoolExecutor （完）
vue源码分析-组件
参考Vue3源码视频讲解：进入学习回到异步组件创建的流程，执行异步过程会同步为加载中的异步组件创建一个注释节点Vnode function createComponent (){ ··· /test.vue'))源码依然走着异步组件处理分支，并且大部分的处理过程还是工厂函数的逻辑处理，区别在于执行异步函数后会返回一个promise对象，成功加载则执行resolve,失败加载则执行reject.var 在2.3.0+版本新增了返回对象形式的异步组件格式，对象中可以定义需要加载的组件component,加载中显示的组件loading,加载失败的组件error,以及各种延时超时设置，源码同样进入异步组件分支 ({ el: '#app', data: { msg: 'test' }})最终渲染的结果为：
