背景
有一个页面比较简单的老项目，现在想支持国际化。这其实也简单，vue-i18n这个插件就可以满足了，实际上也是这么做的。不过我想可不可以通过vue指令来实现一个页面的国际化的工具。
思路
通过vue3生命周期钩子，在页面挂载前，对dom进行遍历，对于目标文本(即配置的页面关键字)，通过匹配预先传入的国际化对象，如果有匹配值，则将目标文本替换为匹配的国际化值，从而完成静态页面的国际化替换。再通过Mutation Observer监视dom, 对于页面中变化的dom，通过同样的方法，进行国际化转换
目标demo页面
希望的是， 在不改变当前页面html部分的情况下，只需要配置一个vue的指令，并预先传入一个目标语言的JSON对象， 就可以在页面渲染完时， 展示对应的语言。
<div class="home-page" v-trans>
对于语言的切换， 当前项目是根据浏览器语言来切换中文和英文两种版本，也可以通过下拉选项切换当前语言。 当前语言应该是一个全局变量，可以保存在内存或者sessionStorage中。
当然不侵入原页面去实现国际化是最好的，遇到一些比较长的字符串，国际化对象也不太好定义。我们也可以通过特殊的key来定义一个带替换的文本，比如prod/list/title, 最终页面找到这个key时， 再通过遍历国际化对象中的prod.list.title拿到value来替换， 不过这样的写法跟vue-i18n也差不多了
国际化转换后的demo页面
关于Mutation Observer
Mutation Observer可以用来监测DOM树的变化，并在变化时执行上面同样的操作
当v-if切换，dom变换时，变更的dom也可以被替换为国际化后的dom
缺陷
这个遍历dom的过程性能开销比较大，对于复杂的组件可能就玩不转了， 而且vue官方也不推荐在组件上使用自定义指令。这也是对另类的国际化方案的一种思考。
vue指令记录
vue-translate-directive
