Vue.js中“表现层与逻辑层分离”指模板专注展示、script专注逻辑，避免模板含副作用或DOM操作，逻辑层用computed/methods封装状态与行为，通过组合式函数、校验hook和原子组件强化分层，样式隔离确保表现自治。

Vue.js 中“表现层与逻辑层分离”不是指物理拆成不同文件，而是通过设计意识让模板（template）专注结构与展示，script 部分专注数据、状态和行为，避免在模板里写复杂判断或副作用逻辑，也不在 JS 中直接操作 DOM 或拼接 HTML。

模板只做“怎么展示”，不掺杂“为什么展示”

表现层的核心职责是把已有数据以清晰、可读的方式渲染出来。应避免：

• 在 {{ }} 中调用含副作用的函数（如修改 state、发请求）
• 使用三元表达式嵌套过深（如 {{ a ? (b ? c : d) : e }}），应提前计算好布尔值或状态字段
• 在 v-if/v-for 中写长表达式（如 v-if="items.filter(x => x.status === 'active').length > 0"），应提取为计算属性

逻辑层负责“状态管理”和“行为封装”，不触碰 DOM

script 部分应聚焦于数据定义、响应式处理、事件响应和业务流转，保持纯逻辑性：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• 用 computed 封装派生状态（如过滤列表、格式化时间），而非每次在模板中重复计算
• 用 methods 封装可复用的行为（如提交表单、切换标签），确保函数无副作用或仅影响自身响应式数据
• 避免在 methods 中手动 document.querySelector 或 innerHTML = ...，这类操作破坏 Vue 的响应式抽象

用组件职责划分强化分层边界

当一个组件同时承担展示、数据获取、表单校验、错误提示时，就模糊了分层。可通过拆分明确边界：

立即学习“前端免费学习笔记（深入）”；

• 把数据获取逻辑下沉到组合式函数（useUserList()）或服务模块，组件只消费返回的状态
• 将表单校验规则抽为独立的校验对象或 hook，组件只传入值并接收结果
• 把带样式的错误提示、加载状态等封装为原子级 UI 组件（如 ValidationError、LoaderOverlay），父组件只控制是否显示

样式隔离是表现层自治的重要支撑

scoped style 或 CSS Modules 能防止表现细节泄漏，让组件真正“自包含”：

• 避免全局 class 名污染（如 .btn、.title），改用语义化且带命名空间的类名（如 .user-card__header）
• 不在 JS 中动态添加/移除 class 来控制样式状态，改用 :class 绑定计算后的 class 对象
• 动画与过渡尽量用 <transition> 和 CSS 类控制，而非 JS 定时器 + class 切换