移动端网站开发前端模板,娱乐网站的特点,wordpress直链视频,律师行业做网站的必要性文章目录 一、mount 基本流程二、执行 $mount 方法三、模版编译1、入口代码2、parse2.1 parseHTML2.2 parseText 3、generategenElement 函数 4、createCompileToFunctionFn 4、mountComponent 一、mount 基本流程
在执行 _init (new Vue时) 的方法中#xff0c;调用了 vm.$m… 文章目录 一、mount 基本流程二、执行 $mount 方法三、模版编译1、入口代码2、parse2.1 parseHTML2.2 parseText 3、generategenElement 函数 4、createCompileToFunctionFn 4、mountComponent 一、mount 基本流程
在执行 _init (new Vue时) 的方法中调用了 vm.$mount(vm.$options.el) 后的挂载流程
通过 parse 将模版编译成抽象语法树 ast将 ast 转成 render 函数执行 render 生成 vnode通过 mountComponent执行 patch 将 vnode 变成真实 dom
二、执行 $mount 方法
源码位置 src/platforms/web/runtime-with-compiler.ts
// 保留了 Vue 原型上原始的 $mount 方法的引用
const mount Vue.prototype.$mount// 定义了一个新的 $mount 方法
Vue.prototype.$mount function (el?: string | Element,hydrating?: boolean
): Component {el el query(el)const options this.$options// resolve template/el and convert to render functionif (!options.render) {let template options.templateif (template) {// ...} else if (el) {// ts-expect-errortemplate getOuterHTML(el)}if (template) {// compileToFunctions 方法会将 template 编译成 render 函数const { render, staticRenderFns } compileToFunctions(template,{// ...},this)options.render render}}// 调用原始 $mount return mount.call(this, el, hydrating)
}三、模版编译
1、入口代码
源码路径 src/compiler/index.ts
export const createCompiler createCompilerCreator(function baseCompile(template: string,options: CompilerOptions
): CompiledResult {// 解析模板字符串生成 ASTconst ast parse(template.trim(), options)// 对AST进行优化// ...// 使用 generate 函数将 AST 转换为渲染函数的代码字符串。// 这一步是将结构化的 AST 转换为实际可执行的 JavaScript 代码const code generate(ast, options)return {ast,render: code.render,staticRenderFns: code.staticRenderFns}
})2、parse
parse函数的作用用于将模板字符串转换为抽象语法树AST 源码路径 src/compiler/parser/index.ts 基本结构
export function parse(template: string, options: ComponentOptions) {// console.log(模版解析 parse);const stack: any[] [];let root; // 最终生成的 AST let currentParent;parseHTML(template, {start(tag, attrs) {// 当遇到标签起始处的处理创建 AST 元素节点let element: ASTElement createASTElement(tag, attrs, currentParent);if (!root) {root element;}currentParent element;processRawAttrs(element);// 进栈stack.push(element);},// 匹配到结束标签后的处理end() {// 当遇到标签结束处的处理// 弹出栈更新当前处理的父级节点const element stack[stack.length - 1];stack.length - 1;currentParent stack[stack.length - 1];if (currentParent) {currentParent.children.push(element);}},chars(text: string) {// 文本内容处理const children currentParent.children;text text.trim();if (text) {let child: ASTNode;let res;// parseText 的实现在下面2.2if (text ! (res parseText(text))) {// 解析文本这里是带有 {{}} 的情况// console.log(res);child {type: 2,expression: res.expression,tokens: res.tokens,text,};} else {// 文本节点child {type: 3,text,};}if (child) {children.push(child);}}},comment(text: string) {// 注释的处理}});return root;
}2.1 parseHTML
parseHTML的工作原理基于正则表达式逐步读取HTML字符串并且根据标签的开始、结束、文本内容等来构建AST
源码路径src/compiler/parser/html-parser.ts
下面是我自己手写的 parseHTML 不考虑注释自闭合标签等。
import { ASTAttr } from src/types/compiler;interface HTMLParserOptions {start?: Function;end?: Function;chars?: Function;comment?: (content: string) void;
}const attribute /^\s*([^\s\/])(?:\s*()\s*(?:([^]*)|([^]*)|([^\s])))?/;
const startTagOpen /^([a-zA-Z_][0-9]*)/;
const startTagClose /^\s*(\/?)/;
const endTag /^\/([a-zA-Z_][0-9]*)/;export function parseHTML(html: string, options: HTMLParserOptions) {const stack: any[] [];let index 0; // 指针let last; // 剩余部分while (html) {last html;let textEnd html.indexOf();if (textEnd 0) {// Comment:// ... // Doctype:// ...// 结束标签const endTagMatch html.match(endTag);if (endTagMatch) {advance(endTagMatch[0].length);parseEndTag(endTagMatch[1]);continue;}// 开始标签const startTagMatch parseStartTag();if (startTagMatch) {handleStartTag(startTagMatch);continue;}}let rest, text;if (textEnd 0) {// 标签内有文本rest html.slice(textEnd);text html.substring(0, textEnd);}// 处理标签内的文本if (text) {advance(text.length);}// 调用文本的处理if (options.chars text) {options.chars(text);}if (html last) {index;html html.substring(1);}}function advance(n) {index n;html html.substring(n);}// 解析开始标签function parseStartTag() {const start html.match(startTagOpen);if (start) {const match: any {tagName: start[1],attrs: [],start: index,};advance(start[0].length);// 处理开始标签的属性let attr, end;while (!(end html.match(startTagClose)) (attr html.match(attribute))) {// 当不为 且匹配到属性时attr.start index;advance(attr[0].length);attr.end index;match.attrs.push(attr);}// 开始标签的 if (end) {advance(end[0].length);match.end index;return match;}}}// 处理开始标签function handleStartTag(match) {const tagName: string match.tagName;// 处理属性const len match.attrs.length;const attrs: ASTAttr[] new Array(len);for (let i 0; i len; i) {const args match.attrs[i];const value args[3] || args[4] || args[5] || ;attrs[i] {name: args[1],value: value,};}// 开始标签进栈stack.push({tag: tagName,lowerCasedTag: tagName.toLocaleLowerCase(),attrs: attrs,start: match.start,end: match.end,});if (options.start) {options.start(tagName, attrs, match.start, match.end);}}// 解析结束标签function parseEndTag(tagName: string) {const lastStack stack[stack.length - 1];if (tagName tagName.toLocaleLowerCase() lastStack.lowerCasedTag) {if (options.end) {options.end(lastStack.tag);}stack.length stack.length - 1;}}
}2.2 parseText
parseText 函数是模板编译过程的一部分用于解析文本节点中的插值表达式
源码路径src/compiler/parser/text-parser.ts
// 解析给定文本text中的动态绑定表达式并返回一个包含解析结果的对象
export function parseText(text: string): TextParseResult | void {const tagRE defaultTagRE;const tokens: string[] [];const rawTokens: any[] [];// 定义一个 lastIndex 变量用于记录上一次匹配的位置let lastIndex (tagRE.lastIndex 0);let match, index, tokenValue;while ((match tagRE.exec(text))) {// 这里是匹配 {{ }}index match.index;// 文本这里是 {{}} 前面的文本if (index lastIndex) {rawTokens.push((tokenValue text.slice(lastIndex, index)));tokens.push(JSON.stringify(tokenValue));}debugger// {{}} 中的内容const exp match[1].trim();tokens.push(_s(${exp}));rawTokens.push({ binding: exp });lastIndex index match[0].length;}// 判断 lastIndex 变量是否小于文本长度小于则代表 {{}} 后面还有文本if (lastIndex text.length) {rawTokens.push((tokenValue text.slice(lastIndex)));tokens.push(JSON.stringify(tokenValue));}// return 生成示例// 比如divmsg: {{ message }}/div// 返回// {// expression: \msg\_s(message),// tokens: [// msg,// {// binding: message// }// ]// }return {expression: tokens.join(),tokens: rawTokens,};
}3、generate
generate 函数的主要作用是基于给定的AST生成相应的JavaScript代码渲染函数 这个渲染函数将会返回一个虚拟节点VNode树表示组件的DOM结构
源码路径src/compiler/codegen/index.ts
export function generate (ast,options
) {const state new CodegenState(options);const code ast ? genElement(ast, state) : _c(div);return {render: with(this){return ${code}},staticRenderFns: state.staticRenderFns}
}code 生成的示例
_c(div,{attrs:{id:app}},[(show)?_c(h3,{staticClass:active},[_v(message: _s(message))]):_e()])genElement 函数
主要职责是将抽象语法树AST的元素Element节点转换成字符串形式的渲染函数代码。该过程涉及到递归地处理元素的所有属性、指令和子节点以确保能生成准确反映模板结构和逻辑的渲染函数代码
核心工作内容 1、处理元素的属性和指令 genElement需要将元素上的所有属性包括静态属性和动态绑定的属性和指令如v-if、v-for、v-model等转换成 JavaScript 代码。对于指令这通常意味着生成特定的代码来实现指令定义的行为。 2、处理子节点 对于每个元素节点genElement还需要考虑其子节点。这包括
递归地对子元素调用genElement生成子元素的渲染函数代码。将文本节点转换成_v创建文本 VNode 的函数调用。将表达式节点转换成_stoString 包装器调用以确保任何绑定的表达式都可以正确地转换成字符串。
3、生成渲染函数代码 最终genElement需要生成类似于_c(‘div’, {…}, […])这样的函数调用代码。_c是创建元素 VNode 的函数第一个参数是标签名第二个参数是一个包含该元素所有属性和指令的数据对象第三个参数是该元素的子节点数组。
4、处理插槽和组件 genElement还需要特别处理插槽和组件。 对于插槽它需要生成_t渲染插槽的函数调用并为插槽内容生成适当的代码。 对于组件它需要根据组件定义生成_c或特定于组件的创建函数如果设置了functional标志调用并处理传递给组件的任何属性或事件监听器。
4、createCompileToFunctionFn
主要是将模板字符串编译成渲染函数并且缓存了这个过程的结果以提高性能。 返回的compileToFunctions函数的主要作用是将 Vue 模板字符串转换成最终的渲染函数
以下是简化的createCompileToFunctionFn函数的示意性解释:
function createCompileToFunctionFn(compile) {const cache Object.create(null);return function compileToFunctions(template, options, vm) {// 使用 options 和模板生成一个缓存的 keyconst key options ? (options.delimiters ? String(options.delimiters) template : template) : template;// 检查缓存中是否已经存在编译后的结果if (cache[key]) {return cache[key];}// 调用编译函数将模板编译成 AST、优化后的 AST 和字符串形式的渲染函数const compiled compile(template, options);// 将字符串形式的渲染函数转换成 JavaScript 函数const res {};// 生成最终的渲染函数res.render new Function(compiled.render);// 处理静态渲染函数只有当使用了 v-once 指令时这部分才不为空const staticRenderFns compiled.staticRenderFns.map(code new Function(code));res.staticRenderFns staticRenderFns;// 缓存结果并返回cache[key] res;return res;};
}
4、mountComponent
挂载组件的核心函数它负责将一个 Vue 组件实例挂载到 DOM 上并启动响应式更新机制以便组件的状态改变时能自动更新对应的 DOM 表现
源码位置src/core/instance/lifecycle.ts
核心代码
function mountComponent(vm, el) {// 设置 vm.$el 以引用真实 DOM 元素vm.$el el;// 如果没有定义 render 函数尝试编译模板生成一个if (!vm.$options.render) {compileToRenderFunction(vm);}// 调用 beforeMount 生命周期钩子callHook(vm, beforeMount);// 创建观察者在数据变化时重新渲染组件const updateComponent () {vm._update(vm._render(), hydrating);};// 创建组件级观察者传递 updateComponent 作为更新函数new Watcher(vm, updateComponent, noop, {before() {callHook(vm, beforeUpdate);}}, true /* 表示这是一个组件观察者 */);// 挂载完成调用 mounted 生命周期钩子if (vm.$vnode null) {vm._isMounted true;callHook(vm, mounted);}return vm;
}
