在vue⽅法中要谨慎定义递归函数
在肝电商后台管理系统的项⽬时，希望对提交到表单对象做⼀个深拷贝从⽽对新对象中的数据进⾏后台数据匹配，教程中的⽅法是安
装lodash依赖，其中提供了深拷贝的⽅法，⼀搜发现这个依赖居然有180M！不就是实现⼀个深拷贝嘛，于是我就想在methods中⾃⼰定义了⼀个深拷贝函数：
methods:{
//深拷贝
deepClone(obj){
if(typeof obj !=='object'|| obj ==null){
// obj 是 null ，或者不是对象和数组，直接返回
return obj
}
// 初始化返回结果
let result
if(obj instanceof Array){
result =[]
}else{
result ={}
}
for(let key in obj){
// 保证 key 不是原型的属性
if(obj.hasOwnProperty(key)){
// 递归调⽤
result[key]=deepClone(obj[key])
}
}
// 返回结果
return result
},
// 获取分类列表
//点击添加按钮添加商品到数据库
addGoods(){
this.$refs.addRefs.validate((valid)=>{
console.log(this.deepClone);
lodash有哪些方法if(!valid){
return this.$('请填写必要的表单项')
}
console.log(this.addForm);
// const form = JSON.parse(JSON.stringify(this.addForm))
const form =this.deepClone(this.addForm)
console.log(form);
})
}
},
点击添加按钮后，好家伙报错了：
但是我发现在addGoods函数中打印this.deepClone是可以拿到deepClone这个⽅法的，仔细回过头去看deepClone发现使⽤递归时⽤的是result[key] = deepClone(obj[key])! 这就导致了在第⼆次“递归”时，vue就不认得deepClone这个东西了，后来我想着将递归项换
成result[key] = arguments.callee(obj[key])，运⾏代码后⼜会报错：
这好像是因为caller callee arguments⽆法在严格模式下使⽤。当我想⽤JSON⽅法进⾏深拷贝的时候（const form =
JSON.parse(JSON.stringify(this.addForm)) 事实证明是有效的~~），我发现好像可以在将递归项的deepClone前加上this：
for(let key in obj){
// 保证 key 不是原型的属性
if(obj.hasOwnProperty(key)){
// 递归调⽤
result[key]=this.deepClone(obj[key])
}
}
这样每次“递归”，Vue都拿到这个deepClone，问题圆满解决。
总结来说就是，在vue中使⽤递归函数时，⼀定要注意递归项的写法。但其实在vue中不管是调⽤methods中的⽅法还是data中的数据，this是⼀个经常被忽略的问题，⼀定要仔细对待，多码多码。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。