跳到主要内容

main

2024年03月18日
柏拉文
越努力，越幸运

一、packages/compiler-core/src/compile.ts​

import { extend } from '@vue/shared';
import { baseParse } from './parse';
import { transform } from './transform';
import { transformText } from './transforms/transformText';
import { transformElement } from './transforms/transformElement';
import { generate } from './codegen';
import { transformIf } from './transforms/vif';

export function baseCompile(template, options = {}) {
  const ast = baseParse(template);

  transform(
    ast,
    extend(options, {
      nodeTransforms: [transformElement, transformText, transformIf]
    })
  );

  return generate(ast);
}

测试用例​

compile h​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3 Next Mini</title>
    <script src="../packages/vue/dist/vue.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const { h, render, compile } = Vue;
      const template = `<div> Hellow World </div>`;

      const renderFn = compile(template);

      const component = {
        render: renderFn
      };

      const vnode = h(component);
      render(vnode, document.querySelector('#app'));
    </script>
  </body>
</html>

compile h reactive​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3 Next Mini</title>
    <script src="../packages/vue/dist/vue.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const { h, render, compile } = Vue;
      const template = `<div>Hello {{ msg }}</div>`;

      const renderFn = compile(template);

      const component = {
        data() {
          return {
            msg: 'World'
          };
        },
        render: renderFn,
        created() {
          setTimeout(() => {
            this.msg = 'World 修改';
          }, 4000);
        }
      };

      const vnode = h(component);
      render(vnode, document.querySelector('#app'));
    </script>
  </body>
</html>

compile h children​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3 Next Mini</title>
    <script src="../packages/vue/dist/vue.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const { h, render, compile } = Vue;
      const template = `<div> <h1>Hello {{ msg  }}</h1> </div>`;

      const renderFn = compile(template);
      console.log('renderFn', renderFn);

      const component = {
        data() {
          return {
            msg: 'World'
          };
        },
        render: renderFn,
        created() {
          setTimeout(() => {
            this.msg = 'World 修改';
          }, 4000);
        }
      };

      const vnode = h(component);
      render(vnode, document.querySelector('#app'));
    </script>
  </body>
</html>

compile h directive v-if​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3 Next Mini</title>
    <script src="../packages/vue/dist/vue.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const { h, render, compile } = Vue;
      const template = `<div>Hello World <h1 v-if="isShow">你好,世界</h1></div>`;

      const renderFn = compile(template);

      const component = {
        data() {
          return {
            isShow: false
          };
        },
        render: renderFn,
        created() {
          setTimeout(() => {
            this.isShow = true;
          }, 4000);
        }
      };

      const vnode = h(component);
      render(vnode, document.querySelector('#app'));
    </script>
  </body>
</html>