petite-vue源码剖析-优化手段template详解
petite-vue源码剖析-优化手段template详解
^_^肥仔John
发布于 2022-05-09 16:09:05
发布于 2022-05-09 16:09:05
什么是<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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-03-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录