以代码实践 深入学习模板编译原理
由于 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent