导入Vue背后用到了什么呢

首先来认识我们vue中核心的几个模块 主要的学习内容就是下面每个库的功能

当我们创建一个App组件到最终渲染到浏览器上时,由于我们的浏览器只能识别JS文件,我们的sfc模块则会将.vue文件转译成我们的js文件,vue官方使用的一个插件rollup打包工具,我们可以从文档中找到配置内容,这个过程的实现就时来自于我们的sfc功能

// package.json
"scripts":{
    "build":"rollup -c"
    }

// rollup.config.js
import vue from 'rollup-plugin-vue'
export default {
  input:'./App.vue',
  plugins:[vue()],
  output:{
    name:'vue',
    format:'es',
    file:'lib/mini-vue.esm.js'
  }
}

在我们的vue3在线模板编译可以直接看到标签经过编译后的render函数结构 这个功能就是由compiler-dom和compiler-core实现的

总结:我们的编译模块中的sfc模块依赖compiler-dom和compiler-core这两个模块将template编译成render函数,后面的逻辑交给我们的运行时来执行,各自模块分工明确,相互依赖

在我们的vue源文件中可以看到

所以在runtime-core中写的所有函数都会被导出给外部随意进行使用 下面只展示一部分内容 我们主要的逻辑都来自于runtime-core模块，这也是我们称之为运行时的原因

后面我们将会学习runtime-core中的核心模块 reactivity也就是数据响应