山东大学软件学院项目实训——创新实训——角色疆界（7）

前言

开发项目基本完成，这篇博客主要用来记录一下开发过程中遇到的各种问题。

vue-for循环

• vue中的v-for循环最好加上key属性，否则在高版本(2.2.0+)的vue中控制台会报错
• key属性需要唯一，理想的 key 值是每项都有唯一 id，全局不需唯一，但在一个循环中需要唯一。

引用图片

• 图片引用问题。直接把本地图片地址放在src里没问题。但如果把地址提取出来写在data里或者通过method动态给src赋值则引用不到。因为放在template模板里会被webpack打包所以可以，而放在data或者动态赋值，图片路径只是一个字符串webpack不会处理所以引用不到，

• 解决办法：通过import或者required引入。import src from ‘…/…/img.png’或者data:{img:require(‘…/…/img.png’)}。

动态增加class

• 给元素动态增加class时，可以在模板中通过:class={‘hasClass’: ifHasClass}来实现，当ifHasClass为true时，该元素会自动加上hasClass的样式。

• 动态绑定的class可以与正常写的一起使用，但如果在一个元素中使用了两个class则会报错。

跨域问题

• 在本地开发请求后端服务器接口的时候，都不可避免的会遇到跨域的问题。解决方法可以通过加一个node中间层或者nginx做反向代理。但是如果是用vue-cli搭建的项目，vue-cli在config中自带了一个proxyTable属性，可以配置这个属性解决跨域的问题。

依赖管理

• 管理和更新项目的依赖可能会导致版本冲突或过时的库。

• 解决方案: 使用 npm 或 yarn 等包管理工具，并定期通过 npm outdated 或 yarn outdated 检查和更新依赖。

深度拷贝

• 对象或数组的简单赋值，修改新值也会改变原值。这时我们需要获取原值的深拷贝对象。

• 对于对象，可以通过newObj = JSON.parse(JSON.stringfy(obj))实现。

• 对于数组，可以通过 newArr = […arr]或者newArr = arr.slice(0)来实现。

对象数组深度监听

• 后端传过来的数组是一个数组对象，页面中绑定对象中某一具体的属性，当该值变化时调用某个函数，自然想到就是watch方法。但如何watch数组对象中某一个具体的属性，显然不可能一个个属性写watch。

• 解决办法：watch整个对象，设置deep为true，当该对象发生改变时，调用处理函数。将页面中绑定的属性写在computed函数中，watch这个computed中的函数，当对象值改变时会进入computed函数中，进而进入watch函数中，再调用处理函数。