Vue运行时编译时

永年一朵花

已于 2024-01-21 21:57:35 修改

阅读量166

点赞数 1

分类专栏： v3 文章标签： vue.js javascript 前端

于 2022-11-19 16:30:01 首次发布

本文链接：https://blog.csdn.net/qq_55791710/article/details/127936335

版权

运行时runtime

编译时compile

运行时+编译时

<template>
    <div v-if="false">
        <p></p>
        <m-component></m-component>
    </div>
</template>

弱弱的问一下在.vue文件template中的html是真正的html嘛？

答案是：nonono，你就像那些vif，自定义组件浏览器明显是不认识的，所以这些东西不应该正确的解析出来，但事实是浏览器并不排斥这些东西，这是因为vue在中间帮我们做了一些事情，那么做了些什么呢？

vue在中间做的事情可以简单的分成两块

运行时 runtime
编译时 compile

运行时runtime

在v3的源代码中有一个runtime-core的文件夹，该文件夹存放的就是运行时的核心代码，链接如下

v3runtime-coreGitHub源码链接

render函数可以代替template的模板渲染

通过render函数最终渲染出一个div(script标签外链来自bootcdn上，bootCdn链接)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>runtime</title>
    // 导入Vue文档
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.45/vue.global.j