纯html中v-if、wx:if等条件渲染语法直接失效，因浏览器仅解析标准html，不识别框架特有语法；其生效必须依赖对应运行时环境或模板引擎预处理。
纯HTML里写v-if或wx:if会直接失效
浏览器根本不识别这些语法，{{ msg }}、v-if="flag"、wx:if="{{status}}"在裸HTML文件中打开后，原样显示为文本，甚至可能被当作属性名解析但不执行。这不是“没生效”，而是压根没进入任何执行上下文——HTML解析器只认标准标签和属性，其余全是字符串。
常见错误现象：
- 页面上直接看到
{{ user.name }}字样 -
<div v-if="false">xxx</div>仍被渲染出来 - 用开发者工具检查 DOM，发现
wx:if还在标签上挂着，没被移除
根本原因：条件渲染必须依赖运行时环境（Vue/React/小程序框架）或预处理阶段（模板引擎）。没有对应解析器，这些标记就是普通字符。
EJS这类服务端模板的if块必须成对闭合
像这种写法，后面必须紧跟，否则模板引擎解析失败，整个页面可能报500或吐出乱码。它不是JavaScript嵌入，而是模板语法——括号匹配、换行无关，但结构必须完整。
实操要点：
-
用于输出变量值，用于控制结构块 - 空值判断要小心：
if (data.value)对null、undefined、''都为false；若需区分空字符串和未定义，得写if (data.value !== undefined) - 不要在模板里写复杂逻辑，比如嵌套三层
if或调用API——业务判断应前置到控制器，模板只做展示层分支
<template></template>标签本身不提供条件能力，只是容器
<template></template>是惰性DOM片段，不渲染、不执行脚本、不触发样式计算，但它不会自动根据某个变量决定是否插入。它只是一个“待用模具”，要不要用、什么时候用、用多少次，全靠JS手动控制。
典型误用：
- 以为给
<template id="item"><div v-if="show">...</div></template>加个v-if就能条件渲染——其实v-if在<template></template>内部照样无效 - 直接把
innerHTML赋给<template></template>，破坏其惰性特性，导致内容提前解析并绑定事件 - 在
<table>里把<code><template></template>放在<tr>中间，浏览器会因HTML解析规则忽略它 <p>正确做法：用<code>template.content获取文档片段，再配合document.importNode()或cloneNode(true)，由JS逻辑决定是否插入、插入几次。自定义元素的
customElements.define()时机决定是否“按需”注册自定义元素不是“写个标签就自动工作”，而是显式调用
customElements.define('my-card', MyCard)后，浏览器才开始把<my-card></my-card>升级为真实组件。这个动作可以延迟，从而实现真正的按需渲染。关键细节：
- 首屏组件必须在
<script defer></script>中同步注册，否则首次渲染会出现HTMLUnknownElement闪动 - 非首屏组件（如弹窗、设置页）应在用户交互时动态
import()再define()，避免加载无用代码 - 重复
define()同一名称会抛DOMException，模块拆分时要注意全局唯一性 -
import()路径必须是静态字符串，构建工具才能正确拆包；拼接变量会导致无法预编译
真正容易被忽略的是：条件渲染的“条件”，不在HTML里，而在JS执行流或服务端数据决策点。模板只是结果载体，不是逻辑引擎。
- 首屏组件必须在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
