SFC 详细定义

SFC 文件基本结构

整体分为三部分，模版（template）、脚本（script）、样式（style），针对每一个部分划分编译职责

模版：页面结构定义，描述了页面的基本属性：标签、属性、事件
脚本：定义页面交互、逻辑，通过模版属性与模版关联
样式：定义模版样式，通过选择器与模版关联

以下为一个简单的示例：

<!-- 模版 -->
<template aip>
    <!-- 可直接引用 script 中声明的 state 的值 -->
    <aip-view (click)="foo" [a]="a" [data]="data" (click)="onClick">
        <TextInput propA="1" />
        ...
    </aip-view>
</template>

<!-- 脚本 -->
<script>
    // 导入 js 文件
    import {} from './a.js';
    // 导入其他组件
    import TextInput from './a.aip';
    export default {
        // 声明需要在模版中使用到的组件名称
        components: { TextInput },
        // 包含所有初始状态
        state: {
            a: 1,
        },
        // 生命周期方法
        init() {
            this.a = 2;
            this.$watch('a', value => {
                console.log(value);
            });
        },
        effect() {
            if (this.a === 2) {
                console.log('effect 2');
            }
        },
        // 模版使用方法，可引用 state, js 文件导入函数
        methods: {
            onClick() {},
        },
    };
</script>

<!-- 样式 -->
<style scoped>
    /* 引用样式 */
    @import 'a.css';
    .a {
        ...;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

SFC 处理流程 & 原理

AIP 的 SFC SDK 和常规的单文件组件最大的区别在于：我们的 SFC 不感知运行时的执行上下文，整体更接近静态页面生成器的概念。

AIP 的 SFC 在完成脚本和组件嵌套等解析后，生成符合 AIP 标准的 HTML 时采用字符内容平铺的方式展开解析树。为了减少开发者开发心智，所有 template 中的 AIP 指令均只在运行时才生效，因此开发者在使用SFC时只需将多个组件的串联视作字符串拼接即可。

整体分为解析和生成阶段，数据处理过程如下图所示

# SFC 详细定义

# SFC 文件基本结构

# SFC 处理流程 & 原理

SFC 详细定义

SFC 文件基本结构

SFC 处理流程 & 原理