以代码实践 深入学习模板编译原理
由于 vue3 修改和移除了 vue2 的部分特性
比如:
- 移除了
.sync
修饰符 v-slot
只能用于组件
或<template>
标签v-if
优先级比v-for
高v-model
默认变成了v-model:modelValue
为了更好的深入 vue3 模板编译原理,我尝试在编译时对 AST 进行转换,以解决上面问题为目标来
👉练练手👈
。
目标:
- 实现对
sync
修饰符的支持 - 将
v-slot
指令可用于 div 等普通元素 - 将
v-for
、v-if
回调到和vue2
一样的优先级 - 将
v-model
默认绑定到value
属性
把
.sync
转化为@update:xxx
[演示]
<my-component :value.sync="count" />
转换后
<my-component :value="count" @update:value="count = $event" />
把
v-slot
支持到普通元素 [演示]
<my-component>
<div #footer></div>
</my-component>
转换后
<my-component>
<template #footer>
<div></div>
</template>
</my-component>
让
v-for
优先级高于v-if
[演示]
<span v-for="i in 10" v-if="i % 2">{{ i }}</span>
转换后
<template v-for="i in 10">
<template v-if="i % 2">
<span>{{ i }}</span>
</template>
</template>
将
v-model
默认为v-model:value
[演示]
<my-component v-model="value" />
转换后
<my-component v-model:value="value" />
更多内容持续更新中……
如果你有更多想法,欢迎给我 PR