[{"data":1,"prerenderedAt":75},["ShallowReactive",2],{"content:\u002Farticles:6445":3},{"item":4,"md":15,"html":16,"menu":17,"excerpt":29,"related":30},{"title":5,"len":6,"tags":7,"id":9,"time":10,"modifyTime":11,"encrypt":12,"showComments":13,"customSlug":14},"如何简单地在vue3中实现i18n",2448,[8],"vue",6445,1619546979530,1679560625581,false,true,"",null,"\u003Ch1 data-marked-line=\"1\">\u003Csup class=\"fake-head\" id=\"%E9%97%B2%E6%89%AF\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E9%97%B2%E6%89%AF\">闲扯\u003C\u002Fa>\u003C\u002Fh1>\u003Cp data-marked-line=\"3\">  \u003Ca href=\"https:\u002F\u002Fv3.cn.vuejs.org\u002F\" target=\"_blank\">vue3\u003C\u002Fa>出来好一段时间了，我一直也没怎么用，因为公司项目一开始用的vue2。迫于前端太卷，要时刻学习，跟进时代，最近着手用vue3+vite写一个练手项目。先不透露项目是啥，后面会开源的。\n  刚开始写vue3时也是处处不顺，因为思维还停留在vue2上，慢慢习惯了也还不错。个人感觉vue3学习了React的优点，把\u003Cstrong>响应式\u003C\u002Fstrong>这块完全丢给用户了。\n  习惯了vue全家桶一把梭，且没写过React的人可能有点适应不过来。\u003C\u002Fp>\n\u003Ch1 data-marked-line=\"7\">\u003Csup class=\"fake-head\" id=\"%E7%AE%80%E4%BB%8B\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E7%AE%80%E4%BB%8B\">简介\u003C\u002Fa>\u003C\u002Fh1>\u003Cp data-marked-line=\"9\">  不用第三方i18n是因为我觉得i18n应该是一个很简单的，自己实现的功能\u003Cimg src=\"\u002Fsticker\u002Faru\u002F58.png\" alt=\"sticker\"\u002F>\u003C\u002Fp>\n\u003Cp data-marked-line=\"11\">  \u003Cspan style=\"color: red\">目标: 更改语言后，所有的\u003Ccode>$i18n()\u003C\u002Fcode>均要同步更改\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre data-marked-line=\"13\" data-lang=\"html\" data-shiki>\u003Ccode class=\"language-html\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">template\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">\t<\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">span\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">>{{ $i18n('articles') }}<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">span\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">template\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Chr data-marked-line=\"19\" \u002F>\n\u003Cp data-marked-line=\"20\">这个博客项目的\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyunyuyuan\u002Fcloudflare-blog\u002Fblob\u002Fmaster\u002Fplugins\u002Fi18n.js\" target=\"_blank\">i18n\u003C\u002Fa>都是我自己写的，因为基于vue2，就简单地在\u003Ccode>Vue.prototype\u003C\u002Fcode>上加一个函数就行了:\u003C\u002Fp>\n\u003Cpre data-marked-line=\"22\" data-lang=\"js\" data-shiki>\u003Ccode class=\"language-js\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> i18n\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">    name\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'中文'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">    default\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\">true\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">    values\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">      articles\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'文章'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">      \u002F\u002F ... ...\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">  },{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">    name\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'English'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">    values\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">      articles\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'Articles'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">      \u002F\u002F ... ...\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\">Vue\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E06C75\">prototype\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">$i18n\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">value\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">){\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> langs\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\"> i18n\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">find\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">v\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">v\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">name\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\">===\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\">this\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">$store\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">state\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">lang\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\">||\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">i18n\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">find\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">v\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\">!!\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">v\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">default\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">  return\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\"> langs\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">values\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">[\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">value\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">]\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\">!==\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\">undefined\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">?\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">langs\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">values\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">[\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">value\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">]\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">:\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">value\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 data-marked-line=\"45\">\u003Csup class=\"fake-head\" id=\"vue3%E5%AE%9E%E7%8E%B0\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#vue3%E5%AE%9E%E7%8E%B0\">vue3实现\u003C\u002Fa>\u003C\u002Fh3>\u003Cp data-marked-line=\"47\">  在vue3中，其实已经不需要用\u003Ccode>vuex\u003C\u002Fcode>了，vue3提供的\u003Ccode>ref\u003C\u002Fcode>，\u003Ccode>reactive\u003C\u002Fcode>，\u003Ccode>computed\u003C\u002Fcode>和\u003Ccode>provide\u003C\u002Fcode>，\u003Ccode>inject\u003C\u002Fcode>已经够用了，而且很轻量。\n  于是乎，我就想着能不能把之前项目的i18n转到vue3上来。简单写了下，确实实现了，但不知性能如何，下面贴代码和注释:\u003C\u002Fp>\n\u003Cpre data-marked-line=\"50\" data-lang=\"ts\" data-shiki>\u003Ccode class=\"language-ts\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">\u002F**\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\"> * main.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">createApp\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">ref\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> } \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">defaultLang\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">} \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> \".\u002Fi18n\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">\u002F\u002F 给app加一个全局ref属性:lang\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> app\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> createApp\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">App\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">app\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">config\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">globalProperties\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">$lang\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> ref\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">localStorage\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">getItem\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"lang\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\">||\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">defaultLang\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">\u002F\u002F ... ...\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cpre data-marked-line=\"63\" data-lang=\"ts\" data-shiki>\u003Ccode class=\"language-ts\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">\u002F**\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\"> * i18n.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\"> * 这个挺简单的，就是单纯i18n的实现\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">computed\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> } \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> 'vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">export\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> langMap\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">        name\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'中文'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">        values\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">          articles\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'文章'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">          \u002F\u002F ... ...\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">        }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    },{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">        name\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'English'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">        values\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">          articles\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'Articles'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">          \u002F\u002F ... ...\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">        }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">export\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> defaultLang\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> \"中文\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">export\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> default\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">val\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> string\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">){\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">    return\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> computed\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(()\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">        const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> lang\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\"> langMap\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">find\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">v\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">v\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">name\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\">===\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\">this\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">$lang\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">value\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">        if\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">lang\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">){\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">            return\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\"> lang\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">values\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">[\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">val\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">        }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">        return\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\"> val\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    }).\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">value\u003C\u002Fspan>\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\"> \u002F\u002F 返回 computed().value\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp data-marked-line=\"99\">  由于i18n基本所有地方都会用到，所以我干脆把它放到mixin里了。这样的话，所有vue组件都会有一个\u003Ccode>$i18n\u003C\u002Fcode>方法，而且这个方法返回的是一个\u003Ccode>computed(xxx).value\u003C\u002Fcode>，所以它会自动更新。\u003C\u002Fp>\n\u003Cpre data-marked-line=\"101\" data-lang=\"ts\" data-shiki>\u003Ccode class=\"language-ts\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">\u002F**\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\"> * i18n-mixin.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\"> i18n\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> '..\u002Fi18n'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">export\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> default\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">    \u002F\u002F ... ...\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">    methods\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">:{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">        \u002F\u002F this 会传到 i18n\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">        $i18n\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">i18n\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp data-marked-line=\"116\">  **说明:**需要在所有vue里把这个mixin手动引入(即\u003Ccode>mixins: [i18nMixin]\u003C\u002Fcode>)，这是目前已知的缺点。\u003Cspan style=\"color: #666\">（更新：深入学习vue3后，发现有更好的方法，使用\u003Ccode>composition api\u003C\u002Fcode>实现\u003Ccode>i18n\u003C\u002Fcode>模块化解耦）\u003C\u002Fspan>\u003C\u002Fp>\n",[18,22,25],{"size":19,"text":20,"url":21},"big","闲扯","%E9%97%B2%E6%89%AF",{"size":19,"text":23,"url":24},"简介","%E7%AE%80%E4%BB%8B",{"size":26,"text":27,"url":28},"small","vue3实现","vue3%E5%AE%9E%E7%8E%B0","闲扯 vue3出来好一段时间了，我一直也没怎么用，因为公司项目一开始用的vue2。迫于前端太卷，要时刻学习，跟进时代，最近着手用vue3+vite写一个练手项目。先不透露项目是啥，后面会开源的。 刚开始写vue3时也是处处不顺，因为思维还停留在vue2上，慢慢习惯了也还不错。个人感觉vue3学习了R…",[31,43,50,57,67],{"item":32,"count":42},{"title":33,"len":34,"tags":35,"id":38,"time":39,"modifyTime":40,"showComments":13,"encrypt":12,"customSlug":41},"关于本站的重构 (又双叒叕重构了)",1503,[36,8,37],"前端","杂谈",8500,1741528184917,1759579038298,"about-renovate",1,{"item":44,"count":42},{"title":45,"len":46,"tags":47,"id":48,"time":49,"modifyTime":49,"encrypt":12,"showComments":13,"customSlug":14},"vue3用于管理axios异步请求一致性的功能函数",3227,[8,36],9820,1725014139074,{"item":51,"count":42},{"title":52,"len":53,"tags":54,"id":55,"time":56,"modifyTime":56,"encrypt":12,"showComments":13,"customSlug":14},"Nuxt3创建SSE server以及client的简明教程",1905,[36,8],5449,1720261091923,{"item":58,"count":42},{"title":59,"len":60,"tags":61,"id":64,"time":65,"modifyTime":66,"encrypt":12,"showComments":13,"customSlug":14},"树莓派桌面小屏",1678,[62,8,63],"树莓派","python",8442,1645457432535,1685333435027,{"item":68,"count":42},{"title":69,"id":70,"time":71,"modifyTime":72,"len":73,"encrypt":12,"showComments":13,"tags":74,"customSlug":14},"适用于静态HTML的一种图片懒加载策略",4176,1640525746928,1640786463701,2387,[8],1793351210498]