前端是不是概念起的太高大上，让人读不懂！我真是服了，不能简单一点吗？
1. 状态 = 变量
// 前端黑话：状态管理
// 人话：变量管理
let count = 0; // 这就是个变量，非要叫"状态"
count = 1; // 这就是修改变量，非要叫"状态更新"
2. 逻辑 = 函数
// 前端黑话：业务逻辑复用
// 人话：把函数抽出来重复用
function login(user) { /* 登录逻辑 */ } // 就是个函数，非要叫"业务逻辑"
3. Composables = 返回变量的函数
// 前端黑话：Composables
// 人话：返回变量和函数的函数
// 高大上说法：创建响应式状态管理的组合式函数
function useCounter() {
const count = ref(0); // 变量
const increment = () => count.value++; // 函数
return { count, increment }; // 返回变量和函数
}
// 人话：一个返回变量和函数的函数
function createCounter() {
let count = 0; // 变量
const add = () => count++; // 函数
return { count, add }; // 返回变量和函数
}
前端术语 vs 人话对照表
| 前端黑话 | 人话 | 实际意思 |
|---|---|---|
| 状态（State） | 变量 | let count = 0 |
| 状态管理 | 变量管理 | 修改变量，通知别人变量变了 |
| 响应式 | 自动更新 | 变量变了，页面自动跟着变 |
| 逻辑复用 | 函数复用 | 把代码写成函数，到处调用 |
| Composables | 返回变量的函数 | function xxx() { return {变量, 函数} } |
| 副作用 | 函数干了啥 | 函数除了返回值还做了其他事 |
| 不可变性 | 别直接修改变量 | 创建新变量，别改旧的 |
实际代码翻译
前端黑话版：
// 创建用户认证的组合式函数，实现状态管理和副作用处理
export function useAuth() {
// 响应式状态
const user = ref(null);
const isLoading = ref(false);
// 业务逻辑：处理用户登录的副作用
const login = async (credentials) => {
isLoading.value = true;
try {
user.value = await api.login(credentials);
} finally {
isLoading.value = false;
}
};
// 暴露状态和接口
return {
user: readonly(user),
isLoading: readonly(isLoading),
login
};
}
人话版：
// 写个函数，返回用户相关的变量和函数
export function createAuth() {
// 变量
let user = null;
let loading = false;
// 函数：登录
const login = async (username, password) => {
loading = true;
try {
user = await fetch('/login', { username, password });
} finally {
loading = false;
}
};
// 返回变量和函数
return { user, loading, login };
}
为什么前端要搞这么多术语？
1. 简历包装 📄
// 实际：我会用变量和函数
// 简历：精通状态管理、响应式编程、函数式编程
2. 社区跟风 🐑
// 以前：jQuery插件
$.fn.carousel = function() { /* ... */ };
// 现在：Composable、Hook、高阶组件、渲染函数...
// 本质上都是：函数返回变量和函数
用最直白的方式理解现代前端
React Hooks = 在函数里用变量
// 黑话：使用useState Hook管理组件状态
const [count, setCount] = useState(0);
// 人话：在函数里用变量
let count = 0;
const setCount = (newCount) => { count = newCount };
Vue Composables = 返回变量和函数的函数
// 黑话：组合式API实现逻辑关注点分离
const { count, increment } = useCounter();
// 人话：调用函数获取变量和函数
const counter = createCounter();
counter.count; // 变量
counter.increment(); // 函数
状态管理 = 全局变量 + 事件通知
// 黑话：Redux实现可预测的状态容器
store.dispatch({ type: 'INCREMENT' });
// 人话：修改全局变量，通知所有人变量变了
window.count = 1;
window.dispatchEvent(new Event('countChanged'));
复盘
我真是服了前端这些高大上的概念，本来挺简单的，结果被这么一包装，我得绕半天脑子才能反应过来，能不能简单点啊，有时候我都要怀疑人生了！
