1.浅谈一下如何避免用户多次点击造成的多次请求。
答：我们在访问有的网站，输入表单完成以后，单击提交按钮进行提交以后，提交按钮就会变为灰色，用户不能再单击第二次，直到重新加载页面或者跳转。这样，可以一定程度上防止用户重复提交导致应用程序上逻辑错误。
还有很多其他的方式进行防止重复点击提交，如
1> 定义标志位：
点击触发请求后，标志位为false量；请求（或者包括请求后具体的业务流程处理）后，标志位为true量。通过标志位来判断用户点击是否具备应有的响应。
2> 卸载及重载绑定事件：
点击触发请求后，卸载点击事件；请求（或者包括请求后具体的业务流程处理）后，重新载入绑定事件。
3> 替换（移除）按钮DOM
点击触发请求后，将按钮DOM对象替换掉（或者将之移除），自然而然此时不在具备点击事件；请求（或者包括请求后具体的业务流程处理）后，给新的按钮DOM定义点击事件。
2.var 和 let 的区别
用var会导致变量提升，出现意想不到的错误，var会自动提升为全局变量，程序容易出错。
而let是es6的关键字，也是声明变量的作用，但是只在当前块内有效，大大提升的程序的安全性。
3.对promise有没有了解，promise的作用主要是什么？
promise主要用来解决异步程序的多重回调问题，使得代码更加清晰。
用promise手写ajax
function getJson(url){
return new Promise((resolve, reject) =>{
var xhr = new XMLHttpRequest();
xhr.open('open', url, true);
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status = 200){
resolve(this.responseText, this)
}else{
var resJson = { code: this.status, response: this.response }
reject(resJson, this)
}
}
}
xhr.send()
})
}
function postJSON(url, data) {
return new Promise( (resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open("POST", url, true)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
resolve(JSON.parse(this.responseText), this)
} else {
var resJson = { code: this.status, response: this.response }
reject(resJson, this)
}
}
}
xhr.send(JSON.stringify(data))
})
}
getJSON('/api/v1/xxx') // => 这里面是就try
.catch( error => {
// dosomething // => 这里就是catch到了error，如果处理error以及返还合适的值
})
.then( value => {
// dosomething // 这里就是final
})
4. setInterval 和 setTimeout的区别？
都是定时器，前者循环触发，后者只触发一次。
5.Vue3.0和Vue2.0的区别？
Vue 3.0 使用的是Composition API，Vue 2.0使用的是 Optional API。这个是最大的不同。Composition API最大的好处是你可以根据需要决定你要不要import。例如computed这个方法，如果你的页面不需要，就不用import。
Vue 3.0的另一个提升就是完全拥抱ts。
总之一点，感觉越来越像一个简版的Angular。
默认进行懒观察（lazy observation）。
在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。
更精准的变更通知。
比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。
3.0 新加入了 TypeScript 以及 PWA 的支持
部分命令发生了变化：
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve
默认项目目录结构也发生了变化：
移除了配置文件目录，config 和 build 文件夹
移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件
6. Vue中父子组件怎么传参的，假如是两个完全不相干的组件，其中一个变化了，怎么影响另一个？
父 -> 子： 子组件用prop属性，然后用watcher观察。
子 -> 父：用$emit
假如是两个完全不相干的组件，其中一个变化了，怎么影响另一个？ -- 可以使用总线模式，即new Vue()，然后手动注册Event，在需要的地方去触发事件即可。
7. 有没有用过Vuex，在项目中是怎么使用的？解决了哪些问题？
1.vuex是什么？怎么使用？哪种功能场景使用它？
答：vue框架中状态管理。在main.js引入store，注入。
新建了一个目录store.js，….. export 。
解决的问题：多个视图依赖同一个状态来自不同视图的行为需要变更同一状态适用于中大型的单页面应用
举例：用户信息，一些经常需要使用到的数据，比如数据字典等
2.vuex有哪几种属性？
答：有五种，分别是 State、 Getter、Mutation 、Action、 Module
state：存放公共数据的地方；
getter：获取根据业务场景处理返回的数据；
mutations：唯一修改state的方法，修改过程是同步的；
action：异步处理，通过分发操作触发mutation；
module：将store模块分割，减少代码臃肿；
3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
答：如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。
4.页面刷新后vuex的state数据丢失怎么解决？
就是放在localStorage 或者就是sessionStorage ，或者借用辅助插vuex-persistedstate。
5.使用vuex的优势是什么？
其实vuex中的所有功能都能够通过其他的方式进行实现，只不过vuex对这些方法进行了整合处理，使用起来更加便捷，同时也便于维护。
8.你们的前端项目是怎么处理数据字典转换的，比如一个学生信息列表，假如后台给你的性别字段是1，你展示列表的时候怎么展示对应的中文？
以 elementUI 举例，在el-table-column中加上**:formatter**
然后，编写对应的格式化方法即可，数据字典可以写死，也可以后台取，还可以放到缓存中，用Vuex维护起来。
版权归原作者 剽悍一小兔 所有， 如有侵权，请联系我们删除。