<template>
元素?<template>
是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为
更多信息请查看:《HTML语义化:HTML5新标签——template》
v-if
搭配<template>
<div v-scope="App"></div>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
App: {
$template: `
<template v-if="status === 'offline'">
<span> OFFLINE </span>
</template>
<template v-else>
<span> ONLINE </span>
</template>
`,
}
status: 'online'
}).mount('[v-scope]')
</script>
首次渲染过程如下:
<template>
元素本身的特性实现在线解析用户不可见(你看不到我,你看不到我:D),和避免如<img src="logo.png">
发送无效请求的问题;<template>
是在block.ts中处理获取模板,因此v-for
搭配<template>
的原理和v-if
是一致的。虽然<template>
能帮助我们优化用户体验和性能,但有些时候也会让我们掉到坑里面,下面一起绕过这些坑吧!
<div v-scope="App"></div>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
App: {
$template: `
<template>
<div>Hello</div>
</template>
`,
}
status: 'online'
}).mount('[v-scope]')
</script>
根块对象对应的是<div v-scope="App"></div>
,而<template>
由于没有附加v-if
或v-for
,因此不会为其创建新的块对象进行处理,最后得到的UI就是这样的:
<div v-scope="App">
<template>
<div>Hello</div>
</template>
</div>
用于无法看到文字Hello。
通过本篇内容的介绍,我们记得<template>
必须搭配v-if
或v-for
使用哦!
后面我们将探索@vue/reactivity在petite-vue的使用,敬请期待。
尊重原创,转载请注明来自:https://cloud.tencent.com/developer/article/1997347 肥仔John