이번에는 vue에서 .vue 파일을 구문 분석하는 단계에 대해 자세히 설명하겠습니다. vue에서 .vue 파일을 구문 분석할 때 주의 사항은 무엇입니까?
우리가 일반적으로 작성하는 .vue 파일을 SFC(Single File Components)라고 합니다. 이 글에서는 SFC를 설명자로 구문 분석하는 프로세스가 vue에서 수행되는 방법을 소개합니다.
vue는 .vue 파일을 설명자로 구문 분석하는compiler.parseComponent(file, [options]) 메서드를 제공합니다.
// an object format describing a single-file component. declare type SFCDescriptor = { template: ?SFCBlock; script: ?SFCBlock; styles: Array<SFCBlock>; customBlocks: Array<SFCBlock>; };
파일 항목
sfc 파일 구문 분석을 위한 항목은 src/sfc/parser.js에 있습니다. , 이 파일은 단일 파일 구성 요소를 컴파일하는 데 사용되는 parsComponent 메서드를 내보냅니다.
다음으로 parsComponent 메소드가 수행하는 작업을 살펴보겠습니다.
parseComponent 메서드
function start(tag, attrs, unary, start, end,){ } function end(tag, start, end){ } parseHTML(content, { start, end })
parseComponent 메서드는 두 개의 functionsstart``end
을 정의한 다음,parseHTML 메서드를 호출하여 .vue 파일의 내용을 컴파일합니다. 그렇다면 이 ParseHTML 메소드는 무엇을 합니까?parseHTML 메소드
이름에서 이 메소드가 html 파서임을 알 수 있습니다. 각 시작 태그를 구문 분석할 때 각 태그가 끝날 때 옵션에서 시작을 호출한다는 것을 간단히 이해하면 됩니다. 결국. 여기에 해당하는 것은 각각 parComponent 메소드에 정의된 시작 및 종료 함수를 호출하는 것입니다. parseComponent에서 깊이 변수를 유지하고 시작 및 깊이에 깊이++를 설정합니다. 그런 다음 깊이 === 0인 각 태그는 템플릿, 스크립트, 스타일 및 일부 사용자 정의 태그를 포함하여 우리가 얻어야 하는 정보입니다.start
시작 태그를 만날 때마다 시작 기능이 실행됩니다.1. 현재
블록을 기록합니다. 각 currentBlock에는 다음 콘텐츠가 포함됩니다.declare type SFCBlock = { type: string; content: string; start?: number; end?: number; lang?: string; src?: string; scoped?: boolean; module?: string | boolean; };2. 태그 이름에 따라 반환된 결과 개체에 currentBlock object을 넣습니다. 반환된 결과 개체는 sfc로 정의됩니다. 태그가 스크립트, 스타일, 템플릿 중 하나라도 아닌 경우 sfc.customBlocks에 배치됩니다. 스타일이라면 sfc.styles에 넣어주세요. 스크립트와 템플릿은 sfc 바로 아래에 배치됩니다.
if (isSpecialTag(tag)) { checkAttrs(currentBlock, attrs) if (tag === 'style') { sfc.styles.push(currentBlock) } else { sfc[tag] = currentBlock } } else { // custom blocks sfc.customBlocks.push(currentBlock) }end 종료 태그를 만날 때마다 종료 기능이 실행됩니다. 1. 현재 라벨이 첫 번째 레이어(깊이 === 1)이고 currentBlock 변수가 존재하는 경우 텍스트에서 이 부분을 꺼내서 currentBlock.content에 넣습니다.
if (depth === 1 && currentBlock) { currentBlock.end = start let text = deindent(content.slice(currentBlock.start, currentBlock.end)) // pad content so that linters and pre-processors can output correct // line numbers in errors and warnings if (currentBlock.type !== 'template' && options.pad) { text = padContent(currentBlock, options.pad) + text } currentBlock.content = text currentBlock = null }2, 깊이-- .
Get descriptor
전체 .vue를 탐색한 후 얻은 sfc 객체가 우리에게 필요한 결과입니다..js를 생성하시겠습니까?
compiler.parseComponent(file, [options])는 구성 요소의 SFCDescriptor만 가져옵니다. .js 파일로의 최종 컴파일은 vue-loader와 같은 라이브러리에 의해 수행됩니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:react는 antd 구성 요소와 협력하여 백엔드 시스템을 만듭니다
Vue.js에서 .native 수정자 사용에 대한 자세한 설명
위 내용은 vue의 .vue 파일 구문 분석 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!