关注点分离不等于文件类型分离。在现代UI开发中，相比于把代码库分离成三个大的层次并将其相互交织起来，不如把他们划分为松散耦合的组件在组合起来更合理些。在单文件组件里，其视图，逻辑，样式是内部耦合的。并且把他们搭配在一起更加内聚且可维护。
单文件组件 TodoList示例： <template> //视图 <div> </div> </template> <script> </script> //逻辑，处理视图的一些产生的事件 <style> </style> //样式，美化视图 单文件组件 TodoList使用 <template> <div id="app"> <h1>My Todo App!</h1> <TodoList/> //3.使用单文件组件 </div> </template> <script> import TodoList from './components/TodoList.vue' //1.引入单文件组件 export default { components: { //2.在components属性中注册 TodoList } } </script>