Vue 中的 template 标签有什么用?
template 主要是作为一个占位符去使用,在 Vue2和 Vue3中 template 的表现有一些区别:
Vue 2:作为一个占位符去使用或者是在组件中传递一个插槽内容。无论什么情况,template 在compiler 后会被去除。
Vue 3:用法同 Vue2,但是在不使用 v-if、v-else-if或 v-else、v-siot、v-for的时候,Vue 不会进行处理,会直接渲染成一个 HTML 原生的 template 标签。
Vue 2 表现分析
Vue 2 中对应 template仅仅是属于一个占位符,在 we-template-compiler处理完毕后,其并不会保留在 render 函数中。换句话说,其最后并不会影响到页面上的渲染的 DOM树。
Vue 3 表现分析
Vue3 中的 template 与 Vue 2 中的有些差别:
template 如果上面不携带任何指令,那么它将被渲染成一个原生的 template 标签。
template 只有与下面的指令一起使用时,里面的元素才会被 Vue 内部进行处理。也就是决定它展示或不展示,或者展示到哪个插槽的位置。
v-if、v-else-if、v-else、v-for、v-slot(简写为 #插槽名)