Vue3的Template写法和Vue2差在哪？新手入门规范+进阶优化技巧全讲

Vue3出来这么久，不少从Vue2转过来的开发者，或者刚入门的前端小白，写Template时总有点不习惯：一会儿冒个小感叹号v-if/v-for优先级报错，一会儿{{}}插值里塞了个三元运算符又卡壳渲染，一会儿setup里的东西不知道怎么在Template里用，今天就把大家最常遇到的这些问题，拆成几个部分讲清楚，保证看完能写一手规范又高效的Vue3 Template代码。

Vue3 Template和Vue2的写法核心区别

先给刚入门或者刚转的人扫个盲，先搞懂“差在哪”，才不会踩Vue2的旧坑，其实Vue3在Template的语法层面对Vue2做了不少“去糟粕取精华”的优化，但整体还是保留了声明式渲染的核心,上手门槛不算高。

v-if和v-for的优先级完全反过来了，在Vue2里，同一个元素上同时写v-if和v-for，v-for的优先级更高，也就是说会先循环出所有元素，再一个个判断要不要渲染——这种写法不仅性能差，逻辑还容易绕，Vue3直接给改了，现在是v-if的优先级更高，先判断要不要渲染，再决定要不要循环，同一个元素上写这俩指令的话，编译器直接给你报错，强制你把它们分开，比如用template标签把要循环的内容包起来，外层写v-if。

template标签支持多个根节点了，在Vue2里，每个组件的Template必须有且只有一个直接子元素，不然会报错，很多人只能在外面套个没用的div，导致页面DOM树变得臃肿，Vue3直接去掉了这个限制，你可以在Template里写多个div、p、img之类的标签，不用再套多余的wrapper了，对性能和代码可读性都有帮助，不过这里要注意，如果你用的是旧版本的UI组件库，可能会有兼容性问题，比如给组件传样式的时候失效，这种时候要么升级组件库,要么还是套个wrapper就行。

然后是setup语法糖里的东西暴露给Template更简单了，在Vue2里，你想在Template里用data里的变量、methods里的方法，直接写就行；在Vue3的Composition API非语法糖版本里，你得在setup函数里return一个对象，把要用的东西放进去；但如果用了