- 综合排序
- 最热优先
- 最新优先
- 来自专栏玩转大前端
Vue2 源码解析
render 方法的生成—— codegen Vue 实例挂载和渲染 组件机制 二、为什么要阅读源码 前端技术的发展非常快，仅仅掌握 Vue 的使用是远远无法跟上前端的发展脚步的 Vue 的源码中有不少经典的解决问题的方法 例如时下流行的 JSX、虚拟 DOM、数据变更的监听检测、观察者模式的使用等 在碰到复杂的项目场景时，仍然需要大量的前端基础知识技能，而 Vue 的源码中有很多问题的解决方案 针对一些复杂的项目场景需要了解底层实现方案 （例如nextTick、render）才好分析出合适的解决方法，以及评估是否可应用到项目中 面试时很多大厂必问（比如腾讯） 三、Vue 实例及入口 1、源码目录 compiler 包括模板编译相关的代码 这里重点关注第 2 个点的实现。 在 Vue 中，双向绑定是通过 v-model 指令来实现的，但是这个指令在 1.0 和 2.0 中的实现原理差别比较大。 因为前端只有一个页面，因此后端不论用户访问的 URL 是什么，只要碰到由前端路由负责控制的 URL，就统一返回唯一的一个页面的 HTML 即可 2、vue-router 实现细节 vue-router
1.5K42编辑于 2022-08-15 - 来自专栏前端到底怎么学好来
你想要的——vue源码分析（2）
背景--Vue.js是现在国内比较火的前端框架，希望通过接下来的一系列文章，能够帮助大家更好的了解Vue.js的实现原理。本次分析的版本是Vue.js2.5.16。(持续更新中。。。) 目录--Vue.js的引入Vue的实例化Vue数据处理（未完成）。。。Vue的实例化由上一章我们了解了Vue类的定义，本章主要分析用户实例化Vue类之后，Vue.js框架内部做了具体的工作。 所以我们先看看Vue的构造函数里面定义了什么方法。 _init(options)}// 将Vue类传入各种初始化方法initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin(Vue)renderMixin (Vue)export default Vue接下来我们看看这个_init方法具体做了什么事情。
30810编辑于 2023-11-30 - 来自专栏clz
【源码共读】Vue2工具函数
【源码共读】Vue2工具函数 前言 github仓库地址 在线地址 点击在线地址查看，会发现该文件实际上有很多函数。实际上就是Vue2的工具函数库。下面就来简单学习一下。 因为源码用的是ts，理解起来可能会加点成本，所以下面讲解会把类型部分去掉(其实是本人的ts水平不高，很难很好的解释) 工具函数 1. (这里想要感谢一下若川大佬，评论问问题，很耐心地解答) 2. 判断系列 2.1 isUndef 判断是不是没有定义。 (JSON.stringify(arr)); // [1,2,3,4] 至于源码中的第三个参数，其实就只是指定缩进的空格是2个，用于美化输出的。 4.2 isBuiltInTag 判断是不是内置的tag(这里的内置并不是html的标签，而是Vue的slot和component)。用的是上面的makeMap方法。
1K30编辑于 2023-03-06 - 来自专栏前端框架源码剖析
Vue2.6源码(2)：$mount方法干了啥
从宏观到微观，从抽象到具体，是Vue源码分析系列文章的分析方式。 我们先来看看源码中，$mount方法都干了些什么： //src/platform/web/runtime/index.js Vue.prototype. _render(), hydrating) 初始化Watcher，并把updateComponent方法传入 调用callHook(vm,'mounted') 本文先忽略第2和第5件事情，后续会有专门的分析 Vue生命周期的文章。 欢迎关注github，内有笔者不断完善的源码注释： https://github.com/creator-yangyitao/vue2.6-source-code-analyse
60620编辑于 2022-09-27 - 来自专栏前端说吧
【每日一题】【vue2源码学习】VUE中模版编译原理
vue内部会将template字符串转化成render函数进行渲染。render函数返回虚拟节点，再将虚拟节点转化成真实DOM。 同时引用带有compiler包的vue体积也会变大。默认.vue文件中的template处理是通过vue-loader来进行处理的，并不是通过运行时的编译。 （默认vue项目中引入的vue.js是不带有compiler模块的。） vue-template-compiler包 vue-loader的作用就是可以把一个模版变成一个对象。 内部用到一个NPM包：《vue-template-compiler》 （插槽、指令等也是用的这个包来处理的，可以自己安装包看下） 包内VueTemplateCompiler.compile就是用来将模版转化成 原理mock： 模版编译原理 源码位置： github：src/compiler/index.js:8 // `createCompilerCreator` allows creating compilers
68430发布于 2020-09-29 - 来自专栏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 - 来自专栏coding个人笔记
vue nextTick源码
早之前有分享过vue的nextTick的使用，当时说当数据发生变化，更新后执行回调没有实现，那时候也不知道怎么测试的，其实nextTick方法只是做了一步异步。 先明确一下，修改数据、渲染页面，在vue里面都是同步的，包括生命周期，也是同步执行，而nextTick是用异步的回调，所以才能获取最新的dom或者实例属性。 之前2.2版本只有promise、MutationObserver、setTimeout，而且是一个自执行函数，我觉得那样看的更舒服，2.x最后的版本2.6.9就不太一样了。上源码，然后使用一下。 characterData: true }); timerFunc = function () { counter = (counter + 1) % 2; 上面是vue nextTick的源码，讲真，看别人源码还要去看一些api，然后分析为什么这样写，看着代码看明白了，一关上，就一点写不出来。 （完）
52420发布于 2020-09-14 - 来自专栏技术社区
源码解析——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- 来自专栏前端说吧
【每日一题】【vue2源码学习】vue如何检测数组的变化
具体看下边源码仿写，真实Array.prototype里的祖宗级别push等方法没有动。 思考： 为啥不重写map等也是修改原数组的方法呢？ 特别注意： 在Vue中修改数组的索引和长度，是无法被监控到并做响应式视图更新的。需要通过以上7种变异方法修改数组才会触发数组对应watcher进行更新。 数组中如果是对象数据类型的也会进行递归劫持。 可以通过Vue.set()方法来进行处理，或者使用splice方法实现。 （其实set内部的核心也是splice方法） 原理mock： vue【数组】响应式数据原理mock let state = [1,2,3]; //待监听的数据 // 1、响应式数据-函数劫持实现数组原型方法重写 state; } render() // 更改数据，观察dom修改 btn.onclick = () => { state.push(state[state.length - 1] + 1) } 源码位置
1.3K20发布于 2020-09-29 - 来自专栏技术工具的探究
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逐步跟进查看源码，下图是我的调用栈跟进信息 根据下图 at "),_c('span',{staticClass:"date"},[_v(_s(_f("formatDate")(record.commit.author.date)))])])}),0)],2) 还是很小巧的，之后再来阅读一下vue3.0代码看看区别
1.8K300发布于 2020-04-29 - 来自专栏全栈修炼
推荐 7 个 Vue2、Vue3 源码解密分析的重磅开源项目
2. Vue2 Vue 虽然出到 Vue3 了，也出了不少 Vue3 的源码教程，但是 Vue2 还是很棒的框架，它的源码还是值得细读的，所以先推荐几个 Vue2 的源码项目。 2.1 vue-analysis Vue.js 源码分析 目前社区有很多 Vue.js 的源码解析文章，但是质量层次不齐，不够系统和全面，这本电子书的目标是全方位细致深度解析 Vue.js 的实现原理 这个 Vue 源码逐行分析，我基本每一行都打上注释，加上整个框架的流程思维导图，基本上是小白也能看懂的 Vue 源码了。 https://github.com/qq281113270/vue 2.6 vue2.0-source Vue 源码分析 -- 基于 2.2.6 版本 该源码分析，会带着大家一起学习 Vue 的大部分代码 https://github.com/liutao/vue2.0-source 3. Vue3 3.1 中文学习网址 先给大家提供 2 个 Vue3 的中文学习网址。
3K20编辑于 2023-03-15 - 来自专栏前端说吧
【每日一题】【vue2源码学习】对VUE响应式数据的理解
而到了vue3.x中时使用Proxy来实现响应式数据的。proxy提升性能但是兼容性不太好。 数组类型数据的劫持 则是通过重写数组的方法来实现的。 （具体重写了哪些方法以及怎么重写的见后期第2题） 内部依赖收集是怎么做到的？ 性能优化相关： • 每一个属性都要重定义，对象层级过深会递归劫持，性能就会变差 • 不需要响应数据的内容不要放到data中（即后续新增的新值不会被监听，不能实现响应式数据，只能用vue. vue【对象】响应式数据原理mock 源码地址 源码位置： github：src/core/observer/index.js:135
57130发布于 2020-09-29 - 来自专栏webpack@4.46.0源码分析
2. 「vue@2.6.11 源码分析」数据驱动视图（响应式）
两种方式来拦截数据的读取-getter和修改-setter，vue-v2.x版本的响应式能力基于Object.definePropery实现。 下面我们看下依赖收集和派发更新的具体实现，vue中常使用的响应式数据为普通对象和数组两种形式，下面我们只以普通对象来说明这两个问题（数组后面单独再补充）。 响应式的实现(v2.x) 1. 在v2.6.11实现中，Watcher持有两个依赖数组（deps, newDeps）,每次重新建立完依赖后的依赖关系可能发生变更（新增了依赖关系，已有的依赖可能不再存在），因此源码中在收集完依赖后会调用 对象属性的新增和删除支持响应式 vue-2.x 深入响应式原理 - 对于对象 Vue 无法检测 property 的添加或移除。 关注重新实现的部分有三点 调用内置实现 对于新增的元素调用 observeArray，将新元素变为响应式 发布通知 派发更新：set/del vue-2.x 深入响应式原理 - 对于数组 Vue 不能检测以下数组的变动
75430编辑于 2023-02-24 - 来自专栏webpack@4.46.0源码分析
2. 「uniapp 源码分析」vue-loader@15.8.3 的整体流程
1. optimizatin.runtimeChunk 是为了将运行时拆分（不要被你当前不需要关注的内容干扰啊） 2. `render`函数了（可以参考[vue@2.6.11 源码分析](https://juejin.cn/column/7192880378015645752)）。 # vue-loader的整体流程 需要从webpack的构建流程讲起，可以参考[webpack@4.46.0 源码分析](https://juejin.cn/column/7161609931563466766 vue&type=script&lang=js&" 2: "./App.vue? ， // 那在当前案例中就只剩下vue-loader了 // 2.
2.8K41编辑于 2023-02-24 - 来自专栏grain先森
Vue2.x 源码解析：组件初始化过程概要
作者：lihongxun945 github.com/lihongxun945/myblog/issues/23 这里分析的是当前(2018/07/25)最新版 V2.5.16 的源码，如果你想一遍看一遍参阅源码 创建Vue实例的两步 我们创建一个Vue实例，只需要两行代码： import Vue from ‘vue' new Vue(options) 而这两步分别经历了一个比较复杂的构建过程： 创建类： $data 等 在 Vue 上创建一些全局方法，比如 Vue.use 可以注册插件 我们导入 Vue 构造函数 import Vue from ‘vue’ 的时候（new Vue(options) 之前 initMixin(Vue) stateMixin(Vue) eventsMixin(Vue) lifecycleMixin(Vue) renderMixin(Vue) 上面这五个函数其实都是在 initUse(Vue) // 添加了 Vue.use 方法，可以注册插件 initMixin(Vue) //添加了Vue.mixin 方法 initExtend(Vue) // 添加了
70830发布于 2019-03-29 - 来自专栏纸上得来终觉浅
Vue3源码阅读笔记之整体执行顺序简介(2)
((n2.el = hostCreateText(n2.children)), container, anchor); } else { const el = (n2.el = n1.el); if (n2.children ! if (n1 == null) { hostInsert((n2.el = hostCreateText(n2.children)), container, anchor ; if (n2.children ! 总结一下：其实和Vue文档中关于生命周期状态的图一样，Vue为了实现前文所述的效果做了很多很多工作。我们按照最简单的情况简要的分析了一下主体流程，在其他文章再逐步分析其他的一些复杂场景。
1.7K10发布于 2021-04-12 - 来自专栏藏经阁
【Vue 源码解析】Vue实例挂载过程
思考 不知道大家是否思考过new Vue()这个过程中究竟做了些什么？ 过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等 2. 源码解析 首先找到vue的构造函数 源码位置：node_modules/vue/src/core/instance/index.js（ps：找不到可以在node_modules目录下搜索，因为懒惰后边就不写 (Vue); // 定义 _render 返回虚拟dom 首先可以看initMixin方法，发现该方法在Vue原型上定义了_init方法 源码位置：src\core\instance\init.js $mount方法 源码位置：/src/platforms/web/entry-runtime-with-compiler.js Vue.prototype. 初始化时声明的render，update方法 render的作用主要是生成vnode 源码位置：src\core\instance\render.js // 定义vue 原型上的render方法 Vue.prototype
1K30编辑于 2023-03-19 - 来自专栏Vue源码 & 前端进阶体系
【Vue原理】Vue源码阅读总结大会
专注 Vue 源码分享，为了方便大家理解，分为了白话版和 源码版，白话版可以轻松理解工作原理和设计思想，源码版可以更清楚内部操作和 Vue的美，喜欢我就关注我的公众号，好吧兄弟，不会让你失望的 阅读源码是需要很多的勇气的 ，特别是对这种 Vue 源码的框架，十分抽象，使用了好多设计模式，封装得十分精密。 阅读源码准备了什么 1、掌握 Vue 所有API 我把 Vue 的所有 API 都详细研究使用过了一遍，而且尽量在项目中都有使用，让自己有深一点的体会 而且我对着官方文档，一个个做了详细的笔记，而且联想过了使用场景 我可以保证，你从不懂到掌握，只要不到十分钟，简直就是 现实版的 十分钟精通到入门 好吧，下面开始说，Vue 的简单总结。 Vue 源码的简短的总结 1、封装了很多常用的函数！ 而我也打算自己出一个Vue 源码系列，算是把自己的阅读心得再二次总结如果你也有兴趣跟我一起阅读源码，就加入我吧，关注我的公众号哦，文章排版会好看很多
95710发布于 2019-08-04 - 来自专栏图雀社区
Vue源码探秘（一）
引言 Vue作为当前前端开发中比较重要的框架，在企业级开发中应用十分广泛。目前也是我的主要技术栈之一。在接下来的系列文章中，我将带大家一起探秘Vue.js底层源码。 本篇文章是Vue源码探秘的第一篇。在这一篇中，我主要是带大家做一些准备工作，介绍一下flow、源码目录和源码构建流程。 Vue.js 的源码利用了 flow 来做静态类型检查，所以了解 flow 有助于我们阅读源码。 ? vue.js源码目录设计 Vue.js的源码都在src目录下: ? vue.js 源码构建 了解Rollup Vue.js 源码使用 Rollup 构建。Rollup 和 Webpack 都是打包工具，但两者的应用场景不同。
1.7K41发布于 2020-04-07
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号