VUE01

1. vue的模板语法

vue使用的是mustacheweb模板引擎，双花括号语法。
模板引擎:负责组装数据，以另外一种形式或外观展现数据

优点：1.可维护性（后期改起来方便）2.可扩展性（增加功能，增加需求方便）3.开发效率高（调试方便）4.观感好（不易写错）

2 v-model的原理

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。
v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。
v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。

3. vue开发多语言项目

Web 项目多语言（i18n，即国际化）是比较常见的需求，常规的做法大概有以下几种：

每种语言单独开发页面，适用于 CMS 之类的网站
多语言文本和页面结构分离，运行时动态替换。适用于单页应用（SPA）
直接用网页翻译插件，机器翻译。这种效果不太理想，同时有一些局限性

多语言配置映射表
跟 Google 翻译不同之处在于，我们采用静态翻译，也就是通过多语言配置文件映射。 vue-i18n 是每种语言准备一个 JSON 文件，属性名用英文，用命名空间（多层级对象）的方式避免命名冲突。我直接简化了，用一个 JS 对象存储所有语言版本，键名就是页面用到的中文。随着日积月累的开发迭代，这些中文散落在几百个文件里……我的做法是用 VS Code 全局正则搜索，把查找结果复制出来，写一个 JS 方法把这些字符串处理成 JS 对象。

操作 DOM
跟 Google 翻译类似，我们也采取事后更新 DOM 的方式来进行翻译。由于是单页应用，随着用户的操作，会不停地更新 DOM。一开始的想法是监听整个 body的变化，在回调里再更新 DOM。监听 DOM 变化有一个原生的 API 可用，就是 MutationObserver。
改进后的 DOM 操作
前面提过，如果在 DOM 渲染后再执行翻译，页面性能非常差。于是想到了 Vue 本身的渲染过程，能不能拦截 Vue 组件渲染过程，插入一些额外的逻辑呢？通过扒源码发现，Vue 原型上有个__patch__方法，每次更新 DOM 的时候都会执行。就从这里入手， 重写这个方法，对还没挂载到文档树的 DOM 元素执行翻译操作。

const __patch__ = Vue.prototype.__patch__;
Vue.prototype.__patch__ = function() {
  const elm = __patch__.apply(this, arguments);
  if (this.$store?.getters?.language) {
    translate(elm, this.$store?.getters?.language);
  }
  return elm;
};

4，vue使用计算属性时，函数名和data数据源中数据可以同名吗？

可以同名，但data会覆盖methods。并且本就不该同名，同名说明你命名不规范。
因为Props、methods、data、computed、watch都是在initState函数中被初始化的。初始化顺序就是我上面给出的顺序，本质上这些都是要挂载到this上面的，你如果重名的话，后面出现的属性自然而然会覆盖之前挂载的属性了。如果你的eslint配置比较严格的话，同名是编译不通过的。

5，vue的data属性可以methods方法同名吗？

不可以，

因为执行顺序的问题，methods 里面的方法会覆盖掉data里面的，最好不要同名。
理由同上。