004
最后更新于：2022-04-02 05:35:43
[TOC]
## 前言
继续总结vue项目实践中的优化和思考
## 实践问题
### 批量对象属性赋值
使用场景：主要是针对需要把对象的一些属性批量的赋值到另外一个对象上，然后如果你的属性很多可能要写很多赋值语句。（前提是属性名一般是相同的）
> 说明：可能有人会问为什么不直接用这个对象，答案也很简单，如果可以直接用，当然直接用是最好的，我自己在写接口param的时候，就会注意这些，需要传参的部分封装到一个特殊的对象里，然后进行data的绑定，这样需要的时候直接用传参对象。但这里讨论的不是这种情况。
```
//优化前
let data = {}
data.name = this.form.name
data.len = this.form.len
data.amount = this.form.amount
//优化版本一 ：利用对象的解构
let {name,len,amount} = this.form
//利用对象解构还可以支持属性名变更的情况
let {name,len:length,amount:money} = this.form
let data = {name,length,money}
//优化版本二 ：可以支持批量的导入需要赋值的，对于拷贝对象，用source属性承接，而需要赋值的属性用propArr承接
//在方法中用json的相关方法支持了简单的对象深拷贝
// 批量加载对象属性，支持传入数组[{source:sourceObj,propArr:[]}]
setProps(arr) {
if (arr.length <= 0) return {}
return arr.reduce((acc, item) => {
item.propArr.reduce((acc, prop) => {
if (typeof item.source[prop] === 'object') {
acc[prop] = JSON.parse(JSON.stringify(item.source[prop]))
} else {
acc[prop] = item.source[prop]
}
return acc
}, acc)
return acc
}, {})
}
```
**拓展思考**：像这种代码如果你爹vue代码里经常写，不妨在你的mixins中混入这个方法，可以为你的页面节省大量的代码空间。
### 批量变量重置
在我们的代码中经常会遇到吧一些变量进行重置，这部分代码重复率很高又没有技术含量，所以我写一个工具方法进行简单的支持，代码优化。
```
//优化前
this.search = false
this.data = []
this.cur_page = 1
this.pageNo = 1
this.totalCount = 0
this.processType = ''
this.person = ''
this.keyword = ''
this.taskStatus = ''
this.stdate = []
this.processStatus = ''
/**
* @author zhangbing
* @param [] arr 需要重置的数组变量
* @param {*} options 配置对象 对于这里的重置规则如果不符合需求的可以自定义option字典,然后用instanceof 判断类型（todo）
*/
resetVars(arr, options) {
if (!arr || arr.length === 0) return
let _options = {
object: {},
string: '',
number: 0,
boolean: true,
null: null,
undefined: undefined
}
_options = options ? Object.assign({}, _options, options) : _options
return arr.map(item => {
if (_options.includes(typeof item)) {
item = _options[typeof item]
} else {
// 不存在重置类型的 重置为字符串
item = ''
}
return item
})
}
```
**拓展思考**：像这种代码如果你爹vue代码里经常写，不妨在你的mixins中混入这个方法，可以为你的页面节省大量的代码空间。
### 骨架屏的相关连接
- [骨架屏](https://juejin.im/post/5b79a2786fb9a01a18267362)
### axios配置的拦截
- [axios模块介绍](https://npm.taobao.org/package/axios)
模块的过多介绍这里就不讲了，这里说明的是一个非http 200状态码的错误解析，一般情况下我们会针对response部分做异常解析。
```
// 配置返回拦截器
_axios.interceptors.response.use(function (response) {
return response
}, function (error) {
if (error.response) {
console.warn(error.response)
return Promise.reject(error.response)
} else {
return Promise.reject(error)
}
})
```
那么这里就会有一个问题，首先报错中的error是不能直接打印的，如果你写会报错如下：
```
Request failed with status code 404
at createError (createError.js?8da8:16)
at settle (settle.js?664b:18)
at XMLHttpRequest.handleLoad (xhr.js?ddba:77)
```
然后针对response存在的情况下，因为这部分的处理是一样的，返回也都在catch里解决的，所以我个人建议直接把错误的提示在这里解决掉，比如通过console.warn的方式或者ui的message.error的方式，这样节省了业务方面的处理错误代码。
但如果你一定希望在接口调用位置处理这部分非http 200的错误，要知道这部分是在catch，error中的，并不是在then中的作用域内。
```
api.xxx().then(res=> {
//http 200 处理代码
}).catch(error=> {
//非 200处理代码
})
```
### vue元素标签带空格部分使用loader配置去掉
有些时候我们在写模板时不想让元素和元素之间有空格，可能会写成这样：
```
```
### data属性没有设置为函数并返回对象的报错
显性的返回对象就可以了
```
[Vue warn]: data functions should return an object:
```
### eslint配置自动验证和自动修复
> 前提：配置了eslint插件并且开启了eslint对文件的格式验证。
默认加了很多eslint规则之后，项目运行就会报错，但实际上肯定是期望软件帮我们自动修正，那么其设置的方法是什么呢？分为两部分，一部分是软件的设置，一部分插件的设置，这里以mac --vscode为例，说明下如何设置自动纠正：
> 1、window电脑：
> 文件 > 首选项 > 设置 打开 VSCode 配置文件
> 2、mac电脑
> code>首选项 >设置
```
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",{
"language": "vue",
"autoFix": true
},"html",
"vue"
],
```
备注：如果你不想在项目中使用eslint，其在config/index.js，dev配置中，useEslint: true ，设置为false即可。
### vue路由拦截实现保存用户信息
场景：为了防止用户突然离开，没有保存已输入的信息。
```
//在路由组件中:mounted(){}，
beforeRouteLeave (to, from, next) {
if(用户已经输入信息){
//出现弹窗提醒保存草稿，或者自动后台为其保存
}else{
next(true);//用户离开
}
}
```
';
- 1111
- 2222
- 333