[{"data":1,"prerenderedAt":101},["ShallowReactive",2],{"$f1xV_CVabh2gCpfVHu1DUlRJSpbdaGmY7v0x8g94HpmM":3,"$f3Fq3Vvc1RPyMVhHFov2pUb_iMkT70EUmvvI_ji0wSyQ":16},{"title":4,"date":5,"category":6,"readTime":7,"tags":8,"content":12,"_excerpt":13,"id":14,"_path":15},"Vue 3 Composition API 完全指南","2026-04-28","技术教程","12 分钟",[9,10,11],"Vue","JavaScript","前端","\u003Ch1>Vue 3 Composition API 完全指南\u003C\u002Fh1>\n\u003Ch2>什么是 Composition API\u003C\u002Fh2>\n\u003Cp>Composition API 是 Vue 3 引入的一组基于函数的 API，它允许我们使用函数来组织组件逻辑，而不是选项对象。\u003C\u002Fp>\n\u003Ch2>为什么需要 Composition API\u003C\u002Fh2>\n\u003Ch3>解决选项式 API 的痛点\u003C\u002Fh3>\n\u003Col>\n\u003Cli>\u003Cstrong>逻辑复用困难\u003C\u002Fstrong>：在选项式 API 中，逻辑分散在不同的选项中\u003C\u002Fli>\n\u003Cli>\u003Cstrong>类型推断不足\u003C\u002Fstrong>：TypeScript 支持不够完善\u003C\u002Fli>\n\u003Cli>\u003Cstrong>代码组织受限\u003C\u002Fstrong>：相关逻辑必须分散在不同部分\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>核心概念\u003C\u002Fh2>\n\u003Ch3>ref 和 reactive\u003C\u002Fh3>\n\u003Cp>\u003Ccode>ref\u003C\u002Fcode> 用于创建响应式的基本类型数据：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-typescript\">import { ref } from 'vue'\n\nconst count = ref(0)\nconsole.log(count.value) \u002F\u002F 0\ncount.value++\nconsole.log(count.value) \u002F\u002F 1\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>reactive\u003C\u002Fcode> 用于创建响应式的对象：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-typescript\">import { reactive } from 'vue'\n\nconst state = reactive({\n  count: 0,\n  name: 'Vue'\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>computed\u003C\u002Fh3>\n\u003Cp>计算属性是基于它们的响应式依赖进行缓存的：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-typescript\">import { ref, computed } from 'vue'\n\nconst firstName = ref('John')\nconst lastName = ref('Doe')\n\nconst fullName = computed(() => {\n  return `${firstName.value} ${lastName.value}`\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>watch 和 watchEffect\u003C\u002Fh3>\n\u003Cp>\u003Ccode>watch\u003C\u002Fcode> 用于观察特定的响应式数据源：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-typescript\">import { ref, watch } from 'vue'\n\nconst count = ref(0)\nwatch(count, (newVal, oldVal) => {\n  console.log(`count changed from ${oldVal} to ${newVal}`)\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>watchEffect\u003C\u002Fcode> 会自动追踪依赖：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-typescript\">import { ref, watchEffect } from 'vue'\n\nconst count = ref(0)\nwatchEffect(() => {\n  console.log(`count is ${count.value}`)\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>最佳实践\u003C\u002Fh2>\n\u003Ch3>逻辑复用\u003C\u002Fh3>\n\u003Cp>使用组合式函数来复用逻辑：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F useCounter.ts\nimport { ref } from 'vue'\n\nexport function useCounter(initialValue = 0) {\n  const count = ref(initialValue)\n  \n  const increment = () => count.value++\n  const decrement = () => count.value--\n  const reset = () => count.value = initialValue\n  \n  return {\n    count,\n    increment,\n    decrement,\n    reset\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>代码组织\u003C\u002Fh3>\n\u003Cp>按功能组织代码，而不是按选项类型：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-typescript\">\u002F\u002F 搜索相关逻辑\nconst searchQuery = ref('')\nconst searchResults = ref([])\n\n\u002F\u002F 分页相关逻辑\nconst currentPage = ref(1)\nconst pageSize = ref(10)\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>总结\u003C\u002Fh2>\n\u003Cp>Composition API 为 Vue 带来了更灵活的代码组织方式和更好的类型支持。掌握它可以让你写出更优雅、更可维护的 Vue 代码。\u003C\u002Fp>\n","Composition API 是 Vue 3 引入的一组基于函数的 API，它允许我们使用函数来组织组件逻辑，而不是选项对象。","vue3-composition-api","\u002Fwriting\u002Fvue3-composition-api\u002F",[17,28,42,53,55,66,80,91],{"id":18,"title":19,"date":20,"category":6,"readTime":21,"tags":22,"_excerpt":26,"_path":27},"cf-xray-nginx-tutorial","移动宽带 SSH 不到海外 VPS？CF + nginx 反向代理的全套方案","2026-06-16","17 分钟",[23,24,25],"333","eee","999","3 分钟摘要： - 移动宽带到 VPS 的 SSH 流量被 GFW 识别并阻断 - 用 Cloudflare CDN 隐藏真实 VPS IP（免费方案） - xray VLESS + WebSocket 加密代理流量 - nginx 网站防御 G网 主动探测","\u002Fwriting\u002Fcf-xray-nginx-tutorial\u002F",{"id":29,"title":30,"date":31,"category":32,"readTime":33,"tags":34,"_excerpt":40,"_path":41},"telegram-86-login-recovery","86 手机号无法登录 Telegram 终极解决方案：绕过付费验证码 + 旧设备验证找回账号","2026-06-14","工具教程","8 分钟",[35,36,37,38,39],"Telegram","86手机号","账号找回","二次验证","短信收费","3 分钟摘要： - 86 号码 + 邮箱 + 二次验证密码 = 找回账号的三要素，缺一不可 - 用第三方客户端 Telega（绕过 Google Play 校验版本）登录，触发邮箱 + 2FA 通道 - 登录成功后再用官方 Telegram 登录、更新到最新版本 - 整个过程不需要原手机短信、不需要","\u002Fwriting\u002Ftelegram-86-login-recovery\u002F",{"id":43,"title":44,"date":45,"category":46,"readTime":33,"tags":47,"_excerpt":51,"_path":52},"indie-developer-journey","从零到一：我的独立开发之路","2026-05-15","创业人生",[48,49,50],"独立开发","创业","个人成长","2023年初，我做出了一个重要决定：离开稳定的工作，成为一名独立开发者。这个决定并非一时冲动，而是经过深思熟虑的结果。","\u002Fwriting\u002Findie-developer-journey\u002F",{"id":14,"title":4,"date":5,"category":6,"readTime":7,"tags":54,"_excerpt":13,"_path":15},[9,10,11],{"id":56,"title":57,"date":58,"category":6,"readTime":59,"tags":60,"_excerpt":64,"_path":65},"react-native-performance","React Native 性能优化实战","2026-04-15","10 分钟",[61,62,63],"React Native","性能","移动端","在开发 React Native 应用时，我们经常会遇到以下性能问题：","\u002Fwriting\u002Freact-native-performance\u002F",{"id":67,"title":68,"date":69,"category":70,"readTime":71,"tags":72,"_excerpt":78,"_path":79},"futures-trading-seven-rules","期货交易的七条铁律：从亏损到稳定盈利的思考","2026-03-20","交易心得","5 分钟",[73,70,74,75,76,77],"期货交易","交易思维","止损","趋势跟踪","心法","做期货这几年，踩过的坑、爆过的仓、熬过的夜，最终都沉淀成这七条心得。期货交易本质上不是预测行情，而是管理自己。以下每一条都是真金白银换来的，建议反复读、慢慢悟。","\u002Fwriting\u002Ffutures-trading-seven-rules\u002F",{"id":81,"title":82,"date":83,"category":84,"readTime":71,"tags":85,"_excerpt":89,"_path":90},"git-workflow-best-practices","Git 工作流最佳实践","2026-03-10","开发工具",[86,87,88],"Git","团队协作","版本控制","这是一个经典的分支模型：","\u002Fwriting\u002Fgit-workflow-best-practices\u002F",{"id":92,"title":93,"date":94,"category":6,"readTime":95,"tags":96,"_excerpt":99,"_path":100},"typescript-tips","TypeScript 实用技巧","2026-02-25","7 分钟",[97,11,98],"TypeScript","编程技巧","使用类型守卫来缩小类型范围：","\u002Fwriting\u002Ftypescript-tips\u002F",1781610782243]