大连个人做网站个人做网站的注意事项

大连个人做网站,个人做网站的注意事项,wordpress批量发布器,住房和城乡建设局☕ 前言#xff1a;为什么后端以前讨厌写前端#xff1f; 作为后端开发#xff0c;我们习惯了 类 (Class)、对象 (Object)、封装 (Encapsulation) 和 依赖注入 (DI)。 当我们看到 Vue2 的代码时#xff0c;内心是崩溃的#xff1a; 满屏的 this#xff1a;这个 this 到底…☕ 前言为什么后端以前讨厌写前端作为后端开发我们习惯了类 (Class)、对象 (Object)、封装 (Encapsulation)和依赖注入 (DI)。当我们看到 Vue2 的代码时内心是崩溃的满屏的this这个this到底指的是 Window 还是实例代码割裂实现一个“搜索”功能变量要写在data里逻辑要写在methods里监听要写在watch里。屏幕滚来滚去逻辑支离破碎。Vue3 的 Composition API组合式 API简直就是后端开发者的福音。别被这个高大上的名字吓到了。在后端眼里它本质上就是把页面逻辑写成了“Java 类”今天我们忘掉前端术语用OOP 的视角重新认识 Vue3。 核心映射Vue3 就是在写 Class在 Java/Spring 中我们写一个业务组件通常是这样的publicclassCounterService{// 1. 私有成员变量 (State)privateintcount0;// 2. 构造函数/初始化 (Init)publicCounterService(){System.out.println(初始化...);}// 3. Getter 方法 (Computed)publicintgetDoubleCount(){returncount*2;}// 4. 公共方法 (Methods)publicvoidincrement(){this.count;}}现在请看 Vue3 (script setup) 的写法script setupimport{ref,computed,onMounted}fromvue;// 1. 成员变量 (ref private field)constcountref(0);// 2. 初始化 (onMounted PostConstruct)onMounted((){console.log(初始化...);});// 3. Getter 方法 (computed)constdoubleCountcomputed(()count.value*2);// 4. 公共方法 (function method)constincrement(){count.value;// 注意JS里修改引用类型要用 .value};/script发现了吗完全一一对应Vue3 终于允许我们将相关的变量和方法写在一起了这就是“高内聚” (High Cohesion)。 进阶Hooks 就是 Service 层后端开发最讲究分层架构。Controller 负责接收请求Service 负责业务逻辑。在 Vue2 时代逻辑很难复用Mixins 是噩梦。但在 Vue3 中我们可以把复杂的逻辑抽离成Hooks (Composables)。请大声跟我念Composables 就是前端的 Service 类场景我们需要在多个页面实现“获取用户信息”的功能。1. 定义 Service (UserHook.js)这就像你写了一个UserService.java。// useUser.jsimport{ref,onMounted}fromvue;import{fetchUserApi}from./api;// 导出这个“Service”exportfunctionuseUser(){// State (DTO)constuserInforef(null);constloadingref(false);// Method (Service Logic)constgetUserasync(id){loading.valuetrue;try{userInfo.valueawaitfetchUserApi(id);}finally{loading.valuefalse;}};// 暴露给外部调用的接口 (Public Interface)return{userInfo,loading,getUser};}2. 注入 Service (UserProfile.vue)这就像在 Controller 里Autowired注入 Service。script setup// 引入 Serviceimport{useUser}from./hooks/useUser;// 依赖注入 (Dependency Injection)const{userInfo,loading,getUser}useUser();// 调用方法onMounted((){getUser(1001);});/scripttemplatediv v-ifloading加载中.../divdiv v-else你好{{userInfo?.name}}/div/template架构图解Hook内部逻辑调用定义状态定义行为监听变化返回Ref / Reactive 数据Composable / ServiceFunction 方法Watch / ComputedVue 组件 / Controller暴露给组件的对象⚠️ 后端转 Vue3 的两个“坑”虽然思想互通但语法细节上有两个坑后端同学最容易踩1.ref还是reactive包装类 vs 原生对象ref就像 Java 的Integer、String包装类。它能包装基本类型也能包装对象。访问值必须加.value。建议无脑用ref虽然多写个.value但更安全不会丢失响应性。reactive就像 Java 的 POJO 对象。不需要.value。坑如果你解构它 (const { name } person), 响应性就丢了这就好比把对象里的字段复制给了个临时变量改临时变量不影响原对象。2. 生命周期Hook 方法别去背beforeCreate、created了。在script setup中代码直接写在根作用域created(构造函数体)。onMountedPostConstruct(DOM 渲染完后执行类似 Bean 初始化完成)。onUnmountedPreDestroy(组件销毁前做清理工作)。 总结Vue3 Composition API 的本质就是把前端开发从“填空题” (Options API)变成了“写作文” (Script Setup)。对于后端开发者来说你只需要转变一个观念组件 (Component)类 (Class)Ref 数据私有字段 (Private Fields)Function方法 (Methods)ComposableService 服务类掌握了这个心法你会发现 Vue3 的代码结构比 Spring Boot 还要清爽。