vue3源码学习api-vue-sfc文件编译

这篇具有很好参考价值的文章主要介绍了vue3源码学习api-vue-sfc文件编译。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue 最有代表性质的就是.VUE 的文件,每一个vue文件都是一个组件,那么vue 组件的编译过程是什么样的呢

Vue 单文件组件 (SFC)和指令 ast 语法树

一个 Vue 单文件组件 (SFC),通常使用 *.vue 作为文件扩展名,它是一种使用了类似 HTML 语法的自定义文件格式,用于定义 Vue 组件。一个 Vue 单文件组件在语法上是兼容 HTML 的。

每一个 *.vue 文件都由三种顶层语言块构成:<template><script><style>,以及一些其他的自定义块:

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

关于sfc 这里有非常详细的介绍 https://github.com/vuejs/core/tree/main/packages/compiler-sfc

编译解析和转换工作流程

可以在流程图中看到先对整个文件进行解析 识别出 出<template><script><style> 模块 在各自解析

                                  +--------------------+
                                  |                    |
                                  |  script transform  |
                           +----->+                    |
                           |      +--------------------+
                           |
+--------------------+     |      +--------------------+
|                    |     |      |                    |
|  facade transform  +----------->+ template transform |
|                    |     |      |                    |
+--------------------+     |      +--------------------+
                           |
                           |      +--------------------+
                           +----->+                    |
                                  |  style transform   |
                                  |                    |
                                  +--------------------+

1.在facade转换中,使用parse API将源解析为描述符,并基于该描述符生成上述facade模块代码;

2.在脚本转换中,使用“compileScript”处理脚本。这可以处理诸如“<script setup>”和CSS变量注入之类的功能。或者,这可以直接在facade模块中完成(代码内联而不是导入),但需要将“导出默认值”重写为临时变量(为此提供了方便的“重写默认值”API),因此可以将其他选项附加到导出的对象。

3.在模板转换中,使用“compileTemplate”将原始模板编译为渲染函数代码。

4.在样式转换中,使用“compileStyle”编译原始CSS以处理“<style-scoped>”、“<style-module>”和CSS变量注入。

compile 和parse

在 packages/vue/src/index.ts 文件中可以看到
https://github.com/vuejs/core/blob/main/packages/vue/src/index.ts

import { compile, CompilerOptions, CompilerError } from '@vue/compiler-dom'

export { compileToFunction as compile }

vue 到处了一个 compile 方便对 <template> 中的内容进行编译,返回一个渲染函数
到@vue/compiler-dom 中看看

import {
  baseCompile,
  baseParse,
  CompilerOptions,
  CodegenResult,
  ParserOptions,
  RootNode,
  noopDirectiveTransform,
  NodeTransform,
  DirectiveTransform
} from '@vue/compiler-core'
import { parserOptions } from './parserOptions'
import { transformStyle } from './transforms/transformStyle'
import { transformVHtml } from './transforms/vHtml'
import { transformVText } from './transforms/vText'
import { transformModel } from './transforms/vModel'
import { transformOn } from './transforms/vOn'
import { transformShow } from './transforms/vShow'
import { transformTransition } from './transforms/Transition'
import { stringifyStatic } from './transforms/stringifyStatic'
import { ignoreSideEffectTags } from './transforms/ignoreSideEffectTags'
import { extend } from '@vue/shared'

export { parserOptions }

export function compile(  template: string,
  options: CompilerOptions = {})={

}

export function parse(template: string, options: ParserOptions = {}): RootNode {
  return baseParse(template, extend({}, parserOptions, options))
}

export * from './runtimeHelpers'
export { transformStyle } from './transforms/transformStyle'
export { createDOMCompilerError, DOMErrorCodes } from './errors'
export * from '@vue/compiler-core'


我们可以看到很多有用的东西

  • 1 导出了parse,方法,用来对.vue 文件解析
  • 2 导出了compile 方法,用来对<template> 模板进行编译,
  • 3 导入了很多常用的vue 指令,如果想要了解vue 指令是如何实现的就可以顺着进去看看
import { transformVHtml } from './transforms/vHtml'
import { transformVText } from './transforms/vText'
import { transformModel } from './transforms/vModel'
import { transformOn } from './transforms/vOn'
import { transformShow } from './transforms/vShow'

可以简单的写一些代码看看 在nodejs上执行一下 vue 也是支持服务器端渲染的

import { compile,} from 'vue'
import { parse } from '@vue/compiler-dom'
const vuefile="<template><h1>hello</h1></template><style></style><script></script> ";
const templateStr="<template><h1>hello</h1></template> ";
console.log(vuefile)
let RenderFunction = compile(vuefile)
console.log(RenderFunction)
const result = parse(vuefile)
console.log(result)

看看输出

 node test.mjs
<template><h1>hello</h1></template><style></style><script></script> 
[Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.
1  |  <template><h1>hello</h1></template><style></style><script></script> 
   |                                     ^^^^^^^^^^^^^^^
[Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.
1  |  <template><h1>hello</h1></template><style></style><script></script> 
   |                                                    ^^^^^^^^^^^^^^^^^
[Function: render] { _rc: true }
{
  type: 0,
  children: [
    {
      type: 1,
      ns: 0,
      tag: 'template',
      tagType: 0,
      props: [],
      isSelfClosing: false,
      children: [Array],
      loc: [Object],
      codegenNode: undefined
    },
    {
      type: 1,
      ns: 0,
      tag: 'style',
      tagType: 0,
      props: [],
      isSelfClosing: false,
      children: [],
      loc: [Object],
      codegenNode: undefined
    },
    {
      type: 1,
      ns: 0,
      tag: 'script',
      tagType: 0,
      props: [],
      isSelfClosing: false,
      children: [],
      loc: [Object],
      codegenNode: undefined
    }
  ],
  helpers: Set(0) {},
  components: [],
  directives: [],
  hoists: [],
  imports: [],
  cached: 0,
  temps: 0,
  codegenNode: undefined,
  loc: {
    start: { column: 1, line: 1, offset: 0 },
    end: { column: 69, line: 1, offset: 68 },
    source: '<template><h1>hello</h1></template><style></style><script></script> '
  }
}
可以看到compile 返回了一个渲染用的函数
parse 对文件解析返回的数据结构里面包含3个模块

指令

所有的指令都在 transforms 这个文件夹下面
https://github.com/vuejs/core/tree/main/packages/compiler-dom/src/transforms

vue 模板中各种内置的指令都是在这里引入的 看一下最简单 vshow

import { DirectiveTransform } from '@vue/compiler-core'
import { createDOMCompilerError, DOMErrorCodes } from '../errors'
import { V_SHOW } from '../runtimeHelpers'

export const transformShow: DirectiveTransform = (dir, node, context) => {
  const { exp, loc } = dir
  if (!exp) {
    context.onError(
      createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION, loc)
    )
  }

  return {
    props: [],
    needRuntime: context.helper(V_SHOW)
  }
}

可以看到这里不是对vshow的定义,因为这个模块是编译
指令的定义定义在这个文件夹下
https://github.com/vuejs/core/tree/main/packages/runtime-dom/src/directives
这是vshow
https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/directives/vShow.ts

import { ObjectDirective } from '@vue/runtime-core'

export const vShowOldKey = Symbol('_vod')

interface VShowElement extends HTMLElement {
  // _vod = vue original display
  [vShowOldKey]: string
}

export const vShow: ObjectDirective<VShowElement> = {
  beforeMount(el, { value }, { transition }) {
    el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display
    if (transition && value) {
      transition.beforeEnter(el)
    } else {
      setDisplay(el, value)
    }
  },
  mounted(el, { value }, { transition }) {
    if (transition && value) {
      transition.enter(el)
    }
  },
  updated(el, { value, oldValue }, { transition }) {
    if (!value === !oldValue) return
    if (transition) {
      if (value) {
        transition.beforeEnter(el)
        setDisplay(el, true)
        transition.enter(el)
      } else {
        transition.leave(el, () => {
          setDisplay(el, false)
        })
      }
    } else {
      setDisplay(el, value)
    }
  },
  beforeUnmount(el, { value }) {
    setDisplay(el, value)
  }
}

function setDisplay(el: VShowElement, value: unknown): void {
  el.style.display = value ? el[vShowOldKey] : 'none'
}

// SSR vnode transforms, only used when user includes client-oriented render
// function in SSR
export function initVShowForSSR() {
  vShow.getSSRProps = ({ value }) => {
    if (!value) {
      return { style: { display: 'none' } }
    }
  }
}

vshow 是指令中最贱的一个主要对 style.display 的修改
vshow 有关的定义主要表现在 beforeMount、mounted、updated、beforeUnMount 这四个生命周期中
而且充分考虑了动画 和没有动画两种情况

可视化的查看编译转换结果play 工具

https://play.vuejs.org/
源码在这里 运维官方的打开很慢
https://github.com/vuejs/repl#readme
可以查看对3个模块编译后的效果

新概念概念 打开新世界的大门

在baseCompile 方法中

const ast = isString(template) ? baseParse(template, options) : template

可以看到这个变量名 ast 那么什么事ast 呢

在计算机科学中,抽象语法树(Abstract Syntax Tree,AST),或简称语法树(Syntax tree),是源代码语法结构的一种抽象表示。 它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。 之所以说语法是“抽象”的,是因为这里的语法并不会表示出真实语法中出现的每个细节。

这是一个可以查看一段js对应的语法树的网站
https://astexplorer.net/
如果我们要解析一段内容,先获取这段内容的语法树,往往更容易解析

js 的语法树工具
https://github.com/facebook/jscodeshift

通过语法树工具根号查看一些结构 如果有需求也可以用在其他用途文章来源地址https://www.toymoban.com/news/detail-746151.html

到了这里,关于vue3源码学习api-vue-sfc文件编译的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3组合式api单文件组件写法

    一,模板部分  二,js逻辑部分 

    2024年02月13日
    浏览(50)
  • vue3 组合式 api 单文件组件写法

    Vue3 中的 Composition API 是一种新的编写组件逻辑的方式,它提供了更好的代码组织、类型推导、测试支持和复用性。相比于 Vue2 的 Options API,Composition API 更加灵活和可扩展。 在 Composition API 中,我们使用 setup 函数来定义组件的逻辑部分。setup 函数是一个特殊的函数,在创建组

    2024年02月12日
    浏览(39)
  • 最新 Vue3、TypeScript、组合式API、setup语法糖 学习笔记

    备注:目前 vue-cli 已处于维护模式,官方推荐基于 Vite 创建项目。 vite 是新一代前端构建工具,官网地址:https://vitejs.cn vite 的优势如下: 轻量快速的热重载(HMR),能实现极速的服务启动。 对 TypeScript 、 JSX 、 CSS 等支持开箱即用。 真正的按需编译,不再等待整个应用编译

    2024年02月20日
    浏览(46)
  • 【Vue2.0源码学习】全局API篇-Vue中全局API分析

    与实例方法不同,实例方法是将方法挂载到 Vue 的原型上,而全局API是直接在 Vue 上挂载方法。在 Vue 中,全局API一共有12个,分别是 Vue.extend 、 Vue.nextTick 、 Vue.set 、 Vue.delete 、 Vue.directive 、 Vue.filter 、 Vue.component 、 Vue.use 、 Vue.mixin 、 Vue.observable 、 Vue.version 。这12个API中有的

    2024年02月08日
    浏览(43)
  • .net6Api后台+VUE3前端实现上传和下载文件全过程

    首先本文参考的是,感谢博主: net6WebApi上传下载文件_cduoa的博客-CSDN博客_webapi下载文件 在博主的基础上,增加了新的功能,代码中有注明,并且使用VUE3前端实现。 后端部分: 1.首先建立IFileService文件 2.建立FileService文件 3.增加FileController文件 4.Program文件中,进行配置和跨域

    2023年04月09日
    浏览(54)
  • Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记

    全局安装最新vue3 升级Vue CLI: 如果是比较旧的版本,可以通过下面命令来升级 通过脚手架创建项目 父组件 子组件 UserComponent.vue 父组件 **子组件1 JiaComponent.vue ** ** 子组件2 JianComponent.vue ** 父组件 子组件 TitleComponents.vue 父组件 **子组件 NavComponent.vue ** 父组件 子组件 NavCompone

    2024年02月05日
    浏览(41)
  • Vue3 —— watch 监听器及源码学习

    该文章是在学习 小满vue3 课程的随堂记录 示例均采用 script setup ,且包含 typescript 的基础用法 在 vue3 中,必须是 ref 、 reactive 包裹起来的数据,才可以被 watch 监听到 1、语法: watch(source, cb, options) source 是监听的目标,有 4 种书写形式: reactive 形式的响应式数据 ref 形式的响

    2024年02月12日
    浏览(34)
  • 【学习笔记】Vue3源码解析:第五部分 - 实现渲染(2)

    课程地址:【已完结】全网最详细Vue3源码解析!(一行行带你手写Vue3源码) 第五部分-:(对应课程的第33 - 35节) 第33节:《讲解组件渲染流程》 1、在 render 函数中拿到虚拟dom vnode后,编写patch函数,它接收3个参数:null、vnode、container,分别代表:上一次的虚拟dom即旧的虚

    2024年04月23日
    浏览(50)
  • 【Vue3】如何创建Vue3项目及组合式API

    文章目录 前言 一、如何创建vue3项目? ①使用 vue-cli 创建  ②使用可视化ui创建  ③npm init vite-app   ④npm init vue@latest 二、 API 风格 2.1 选项式 API (Options API) 2.2 组合式 API (Composition API) 总结 例如:随着前端领域的不断发展,vue3学习这门技术也越来越重要,很多人都开启了学习

    2024年02月03日
    浏览(63)
  • 【Vue3】vue3中的watchEffect使用及其他的API

    目录  一,watchEffect 二,生命周期 三,什么是hooks? 四,toRef  五,其他组合式API 5.1shallowReactiveshallowRef 5.2readonlyshallowReadonly 5.3.toRawmarkRaw 5.4自定义Ref-customRef ​5.5provide$inject 5.6响应式数据的判断 写在最后     1.watch: 既要指明监视的属性,也要指明监视的回调。 2.watchEffect: 不

    2024年02月01日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包