2030要降1/3癌症死亡率！國健署研擬幽門螺旋桿菌檢測 最快8月試辦
2024-12-24 20:04
1.vue-router源码学习 - install与<router-view>
2.Vue源码解析(2)-$mount实现
3.每天学点Vue源码之vm.$mount挂载函数
4.vue/compiler-sfc源码分析学习--part2:如何处理script--day5
5.Vue源码（一）—— new vue()
6.学习vue源码（9）手写代码生成器
vue-router源码学习 - install与<router-view>
本文深入解析Vue-router的学习install过程和部分逻辑。首先，码交探讨Vue-router的学习注册机制，即Vue.use(VueRouter)时的码交执行关键代码。利用Vue.mixin功能，学习混入beforeCreate钩子，码交源码时代陈老师确保所有组件在初始化阶段定义好_router和_routerRoot。学习this.$options展示组件构造时传递的码交选项信息。根组件执行beforeCreate时，学习_routerRoot指向根组件，码交而非根组件的学习执行则不同。全局混入后，码交定义$router和$route变量，学习并注册两个组件。码交
接下来，学习聚焦渲染流程的核心。主要负责渲染匹配到的路由组件。上篇中介绍的嵌套路由机制在匹配RouteRecord后，使用Route，其matched字段包含匹配的RouteRecord及其所有祖先RouteRecord。多个层级的页面中，每个router-view需知道自己的层级，通过源码内容实现。每个router-view标记自身，便于确定层级，在找到对应层级组件后进行渲染。
至此，渲染过程简化流程清晰呈现，getway源码但Vue-router的复杂性意味着仍有更多细节待探索。后续文章将继续深入，逐步解析更多功能。
Vue源码解析(2)-$mount实现
在 Vue 实例创建过程中，$mount 方法起着关键作用，它将实例挂载到指定的 DOM 元素上，标志着渲染过程的开始。在深入理解 Vue 的渲染机制时，我们首先关注其整个渲染流程，细节部分会在后续章节展开。
Vue 的渲染过程根据构建方式有所不同，有独立构建（包含模板编译器）和运行中构建（不包含模板编译器）两种。独立构建为支持服务端渲染而设计，体积较大，而运行时构建则更轻量。了解这些构建方式有助于我们更好地理解源码分析。
接下来，我们将分析运行时版本的 $mount 实现。在浏览器环境下，$mount 函数在 Vue 的原型上定义，并处理 el 参数，可能是字符串或 DOM 节点。它会检查并处理 render 函数和模板，如果没有 render，则将 template 转换为 render 函数，确保 Vue 只接受 render 函数作为有效的模板定义。
在 'src/platforms/web/entry-runtime-with-compiler.js' 中，motrix 源码$mount 会调用 mountComponent 函数，核心步骤包括生成虚拟节点、实例化渲染 Watcher，以及最终调用 updateComponent 更新 DOM。这个过程涉及到核心的生命周期方法和观察者模式，确保组件在数据变化时得到渲染。
然而，关于 render 函数的编译过程，虽然我们已经概述了整体步骤，如添加 web 平台特性、解析模板为抽象语法树（AST），并生成和缓存 render 函数，但详细过程会在后续章节中详细讲解。
下一节将深入探讨 render 函数编译的五个关键步骤及其源码实现。敬请期待！
每天学点Vue源码之vm.$mount挂载函数
在vue实例中，通过$mount()实现实例的挂载，下面来分析一下$mount()函数都实现了什么功能。
$mount函数执行位置
_init这个私有方法是在执行initMixin时候绑定到Vue原型上的。
$mount函数是如如何把组件挂在到指定元素
$mount函数定义位置
$mount函数定义位置有两个:
第一个是在src/platforms/web/runtime/index.js
这里的$mount是一个public mount method。之所以这么说是因为Vue有很多构建版本, 有些版本会依赖此方法进行有些功能定制, 后续会解释。
// public mount method// el: 可以是一个字符串或者Dom元素// hydrating 是Virtual DOM 的补丁算法参数Vue.prototype.$mount = function ( el? string | Element, hydrating? boolean): Component { // 判断el, 以及宿主环境, 然后通过工具函数query重写el。 el = el && inBrowser ? query(el) : undefined // 执行真正的挂载并返回 return mountComponent(this, el, hydrating)}
src/platforms/web/runtime/index.js 文件是运行时版 Vue 的入口文件,所以这个方法是运行时版本Vue执行的$mount。
关于Vue不同构建版本可以看 Vue对不同构建版本的解释 。
关于这个作者封装的工具函数query也可以学习下:
/** * Query an element selector if it's not an element already. */export function query (el: string | Element): Element { if (typeof el === 'string') { const selected = document.querySelector(el) if (!selected) { // 开发环境下给出错误提示 process.env.NODE_ENV !== 'production' && warn( 'Cannot find element: ' + el ) // 没有找到的情况下容错处理 return document.createElement('div') } return selected } else { return el }}
第二个定义 $mount 函数的地方是src/platforms/web/entry-runtime-with-compiler.js 文件，这个文件是完整版Vue(运行时+编译器)的入口文件。
关于运行时与编译器不清楚的fdtd源码童鞋可以看官网 运行时 + 编译器 vs. 只包含运行时 。
// 缓存运行时候定义的公共$mount方法const mount = Vue.prototype.$mountVue.prototype.$mount = function ( el? string | Element, hydrating? boolean): Component { // 通过query方法重写el(挂载点: 组件挂载的占位符) el = el && query(el) /* istanbul ignore if */ // 提示不能把body/html作为挂载点, 开发环境下给出错误提示 // 因为挂载点是会被组件模板自身替换点, 显然body/html不能被替换 if (el === document.body || el === document.documentElement) { process.env.NODE_ENV !== 'production' && warn( `Do not mount Vue to <html> or <body> - mount to normal elements instead.` ) return this } // $options是在new Vue(options)时候_init方法内执行. // $options可以访问到options的所有属性如data, filter, components, directives等 const options = this.$options // resolve template/el and convert to render function // 如果包含render函数则执行跳出,直接执行运行时版本的$mount方法 if (!options.render) { // 没有render函数时候优先考虑template属性 let template = options.template if (template) { // template存在且template的类型是字符串 if (typeof template === 'string') { if (template.charAt(0) === '#') { // template是ID template = idToTemplate(template) /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && !template) { warn( `Template element not found or is empty: ${ options.template}`, this ) } } } else if (template.nodeType) { // template 的类型是元素节点,则使用该元素的 innerHTML 作为模板 template = template.innerHTML } else { // 若 template既不是字符串又不是元素节点，那么在开发环境会提示开发者传递的 template 选项无效 if (process.env.NODE_ENV !== 'production') { warn('invalid template option:' + template, this) } return this } } else if (el) { // 如果template选项不存在，那么使用el元素的outerHTML 作为模板内容 template = getOuterHTML(el) } // template: 存储着最终用来生成渲染函数的字符串 if (template) { /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { mark('compile') } // 获取转换后的render函数与staticRenderFns,并挂在$options上 const { render, staticRenderFns } = compileToFunctions(template, { outputSourceRange: process.env.NODE_ENV !== 'production', shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters: options.delimiters, comments: options.comments }, this) options.render = render options.staticRenderFns = staticRenderFns /* istanbul ignore if */ // 用来统计编译器性能, config是全局配置对象 if (process.env.NODE_ENV !== 'production' && config.performance && mark) { mark('compile end') measure(`vue ${ this._name} compile`, 'compile', 'compile end') } } } // 调用之前说的公共mount方法 // 重写$mount方法是为了添加模板编译的功能 return mount.call(this, el, hydrating)}
关于idToTemplate方法: 通过query获取该ID获取DOM并把该元素的innerHTML 作为模板
const idToTemplate = cached(id => { const el = query(id) return el && el.innerHTML})
getOuterHTML方法:
/** * Get outerHTML of elements, taking care * of SVG elements in IE as well. */function getOuterHTML (el: Element): string { if (el.outerHTML) { return el.outerHTML } else { // fix IE9- 中 SVG 标签元素是没有 innerHTML 和 outerHTML 这两个属性 const container = document.createElement('div') container.appendChild(el.cloneNode(true)) return container.innerHTML }}
关于compileToFunctions函数, 在src/platforms/web/entry-runtime-with-compiler.js中可以看到会挂载到Vue上作为一个全局方法。
mountComponent方法: 真正执行绑定组件
mountComponent函数中是出现在src/core/instance/lifecycle.js。export function mountComponent ( vm: Component, // 组件实例vm el: ?Element, // 挂载点 hydrating? boolean): Component { // 在组件实例对象上添加$el属性 // $el的值是组件模板根元素的引用 vm.$el = el if (!vm.$options.render) { // 渲染函数不存在, 这时将会创建一个空的vnode对象 vm.$options.render = createEmptyVNode if (process.env.NODE_ENV !== 'production') { /* istanbul ignore if */ if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') || vm.$options.el || el) { warn( 'You are using the runtime-only build of Vue where the template ' + 'compiler is not available. Either pre-compile the templates into ' + 'render functions, or use the compiler-included build.', vm ) } else { warn( 'Failed to mount component: template or render function not defined.', vm ) } } } // 触发 beforeMount 生命周期钩子 callHook(vm, 'beforeMount') // vm._render 函数的作用是调用 vm.$options.render 函数并返回生成的虚拟节点(vnode)。template => render => vnode // vm._update 函数的作用是把 vm._render 函数生成的虚拟节点渲染成真正的 DOM。 vnode => real dom node let updateComponent // 把渲染函数生成的虚拟DOM渲染成真正的DOM /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { updateComponent = () => { const name = vm._name const id = vm._uid const startTag = `vue-perf-start:${ id}` const endTag = `vue-perf-end:${ id}` mark(startTag) const vnode = vm._render() mark(endTag) measure(`vue ${ name} render`, startTag, endTag) mark(startTag) vm._update(vnode, hydrating) mark(endTag) measure(`vue ${ name} patch`, startTag, endTag) } } else { updateComponent = () => { vm._update(vm._render(), hydrating) } } // we set this to vm._watcher inside the watcher's constructor // since the watcher's initial patch may call $forceUpdate (e.g. inside child // component's mounted hook), which relies on vm._watcher being already defined // 创建一个Render函数的观察者, 关于watcher后续再讲述. new Watcher(vm, updateComponent, noop, { before () { if (vm._isMounted && !vm._isDestroyed) { callHook(vm, 'beforeUpdate') } } }, true /* isRenderWatcher */) hydrating = false // manually mounted instance, call mounted on self // mounted is called for render-created child components in its inserted hook if (vm.$vnode == null) { vm._isMounted = true callHook(vm, 'mounted') } return vm}
vue/compiler-sfc源码分析学习--part2:如何处理script--day5
在vue/compiler-sfc源码分析学习系列的part2中，我们深入探讨了script部分的处理。今天是系列的最后一天，我们将重点关注script的生成和转换。
首先，setup返回语句部分主要判断了使用的是template、inlineTemplate还是render函数。对于常规template，我们进入了第一部分逻辑，返回的`returned`包含了变量、函数、类等，但不包括defineProps、defineEmits和defineExpose这些特殊处理。
对于inline或render函数的处理，虽然重要，但这里暂且不表，留待后续章节。在`export default`部分，除了boolean类型和带有默认值的函数，其余类型定义会被移除，坑底 源码以符合非setup语法的要求。
接着，代码将解析后的数据整理成非setup语法糖形式，包括合并非setup块的export和导入。这部分，我们直接展示了最终的script代码，以直观展示转换过程。
在代码中，有几个关键点值得注意，特别是辅助函数的加入，如mergeDefaults，用于合并默认值。最后，总结部分重申，今天是script处理的尾声，主要工作是将setup语法糖转化为直观的代码，尤其是处理props部分的复杂性。
Vue源码（一）—— new vue()
探究Vue源码的奥秘，始于Vue实例化过程。在src/core目录下的index.js文件，承载了Vue实例化的核心逻辑。初探此源码，面对未知，不妨大胆猜想，随后一一验证。
深入分析，我们发现一个简单粗暴的Vue Class定义，随后一系列init、mixin方法用于初始化关键功能。通过代码，确认此入口确实导出一个Vue功能类。进一步探索，核心在于initGlobalAPI，它揭示Vue全局属性，包括官方说明的全局属性。详细代码部分因篇幅限制，仅展示关键代码段。
关注全局变量，如$isServer、$ssrContext，它们在ssr文档中有详细说明。这些变量与Head管理紧密相关，用于SSR环境下的特殊操作。至此，入口文件解析完成。
深入Vue class实现，我们揭示其内核，包括Vue的生命周期管理。此部分解析将揭示Vue实例如何运作，以及其生命周期各阶段的重要性。了解这些，有助于我们更深入地掌握Vue的使用与优化。
学习vue源码（9）手写代码生成器
深入学习 vue 源码的系列文章中，我们探讨了模板编译的解析器与优化器部分。在本文中，我们将聚焦于代码生成器的实现原理与操作流程，以实现从 AST（抽象语法树）到 render 函数代码字符串的转换。
代码生成器在模板编译流程中承担着至关重要的角色，其核心任务是将由解析器和优化器处理得到的 AST 转换为可执行的 render 函数代码字符串。这一过程主要通过调用一系列预定义的函数（如 _c、_v、_s）来构建动态代码片段，从而实现模板的动态渲染。
具体而言，代码生成器依据 AST 结构，递归地生成代码片段。对于一个简单的模板，代码生成器会调用 _c 来创建元素，_v 来创建文本节点，而 _s 则用于返回字符串值。这些函数的调用构建了 render 函数的核心逻辑，实现了模板的动态渲染。
解析器负责将模板字符串转换为 AST，例如将上述简单的模板转换为对应的 AST 结构。通过调用代码生成器，可以将 AST 转换为可执行的 render 函数代码字符串。生成后的代码字符串中包含了 _c、_v、_s 等函数调用，这些函数对应着动态创建元素、文本节点以及返回字符串值的操作。
理解代码生成器的关键在于，它如何根据 AST 结构构建渲染函数代码。这一过程涉及到对 AST 中元素、文本和属性的遍历与处理，通过调用特定的生成函数（如 genData 和 genChildren）来构建数据和子节点，最终生成完整的 render 函数代码字符串。
在实现细节中，代码生成器会针对 AST 中的不同节点类型，采用不同的处理逻辑。例如，对于没有属性的节点（el.plain 为 true），代码生成器无需执行数据生成逻辑（genData），而直接跳过该步骤。这种处理方式优化了代码生成效率，确保了渲染函数代码的简洁与高效。
综上所述，代码生成器在模板编译流程中起到了关键作用，通过将 AST 转换为可执行的 render 函数代码，实现了模板的动态渲染。这一过程涉及对 AST 的递归遍历、函数调用构建以及特定逻辑的实现，构成了 vue 模板编译的核心机制。深入理解代码生成器的实现原理有助于开发者更好地掌握 vue 模板编译的底层机制，为开发高质量、高效的应用打下坚实的基础。
vue/compiler-dom源码分析学习--day4: 字符串化hoist节点
vue/compiler-dom源码解析继续：深入理解字符串化hoist节点
前言：在处理内置指令后，我们今日关注的是@vue/compiler-dom包中的字符串化hoist节点操作。这部分代码在baseCompile方法中找到调用入口，且hoistStatic选项默认为true，尽管没有直接传入参数。
在vue/compiler-sfc/__tests__/compileTemplate.spec.ts的测试用例中，我们发现参数来源。接着，我们追踪到hoistStatic.ts和`walk`函数，这是实现静态提升（static hoisting）的关键，用于优化性能，避免在render function中重复生成和比较不会变化的静态节点。
静态提升允许将不变的元素和文本节点抽离到render函数外，提高渲染效率。例如，一个只包含动态部分的，其静态部分会被提升，渲染时会直接使用字符串拼接，而不是每次都重新创建。
现在，我们来看下stringifyStatic方法。该方法在确定节点会被提升到哪个阶段后执行，确保只处理适合的普通元素和文本节点。在transforms/stringifyStatic.ts中，代码负责识别可stringify的子节点，比如v-slot组件是不支持的，但可以hoist。
在`analyzeNode`方法中，逐层递归检查节点，确保所有子节点满足stringify条件。文本节点则有特殊的处理方式，其他情况下，如遇到table元素，可能存在浏览器兼容性问题，导致不能使用innerHTML。
总结`stringifyCurrentChunk`方法，它将识别到的静态块转换为字符串调用节点，替换原始hoist元素。整个过程旨在优化性能，通过字符串化hoist节点，减少不必要的DOM创建和比较。
尽管代码逻辑相对直观，但众多小方法间的跳转可能影响阅读。核心是找到可stringify的最大静态块，并进行替换。关于内置指令和style的处理，也有相应的优化策略，如transformStyle处理静态style为bind类型。
2024-12-24 20:38
2024-12-24 20:34
2024-12-24 20:24
2024-12-24 20:12
2024-12-24 19:48
2024-12-24 18:18
2024-12-24 18:05
2024-12-24 17:55