vue3 setup html js分离

在Vue3中，引入了一个新的语法糖叫做setup。它允许我们将HTML和JavaScript代码分离开来，提高代码的可读性和可维护性。

通过将数据、方法和计算属性等定义在setup函数中，我们可以将Vue组件的逻辑部分与模板部分彻底分离。在这种模式下，我们可以将用户相关的操作代码放在一个独立的JS文件中，将商品相关的操作代码放在另一个JS文件中，将商品分类相关的操作代码放在另一个JS文件中。这样，我们在使用这些操作方法时，只需要在相应的JS文件中引用即可，无需在每个页面中重复引入API文件或处理数据赋值等操作。这种分离的方式使代码更加清晰易懂。

而在Vue页面中，我们只需要引入这些独立的JS文件，无需在模板中编写相应的操作信息。这样，页面的代码会更加简洁，只需关注展示逻辑，不需要关注具体的操作细节和数据处理。这种分离使得我们能够更专注于页面的展示和用户交互，提升开发效率和代码质量。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3 setup 组合式api使用 操作文件单独提出 类似后台的控制器](https://blog.csdn.net/qq_40095911/article/details/124091752)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]