
vue 项目中混用 template 和 jsx
在 Vue 真实生产项目中混用 Template 和 JSX 是一种常见的做法。以下是混用的常见场景:
- 小型组件:对于只会被创建和销毁一次的小型组件,如 Toast 消息提示,使用 JSX 可以简化创建和销毁过程,使其比使用 Template 更方便。
- 无法预知的渲染场景:如果无法预知将在何处渲染组件,使用 JSX 可以动态创建和挂载组件。
- Template 中使用 JSX:尽管 Template 和 JSX 是不同的语法,但 Template 也可以嵌套 JSX 代码。这允许在 Template 中灵活地使用 JSX 的优势。
虽然混用 Template 和 JSX 带来了一定的灵活性,但需要注意以下几点:
里面有2个文件夹。其中这个文件名是:finishing,是我项目还没有请求后台的数据的模拟写法。请求后台数据之后,瀑布流的js有一点点变化,放在文件名是:finished。变化在于需要穿参数到后台,和填充的内容都用后台的数据填充。看自己项目需求来。由于chrome模拟器是不允许读取本地文件json的,所以如果你要进行测试,在hbuilder打开项目就可以看到效果啦,或者是火狐浏览器。
- 保持一致性:尽可能在同一项目中保持一致的语法,避免不必要的混淆。
- 理解性能差异:JSX 可能比 Template 性能稍差,尤其是当大量使用时。在需要高性能的场景中,建议使用 Template。
- 考虑代码可读性:对于多个开发者参与的项目,混用 Template 和 JSX 可能导致代码可读性下降。









