VUE开发记录

记录vue开发中遇到的问题 - 2023/10/16

1、值存在却校验为空

项目element-ui表单中，input点击需要打开弹框，弹框选择值后回填到input，但是此时elementUI的校验出错（值存在却校验为空）

解决方法：
this.employeeInfo[res.type] = res.value; 改为 this.$set(this.employeeInfo, res.type, res.value)
然后触发校验this.$refs.employeeInfo.validateField(res.type)就可以了

原因分析

这是一个关于Vue的响应式系统的问题。

Vue的响应式系统：Vue使用了响应式的数据绑定来实现数据和DOM之间的自动同步。当直接给一个对象添加一个新的属性时，Vue无法检测到这个改变，因为Vue在实例化时会对数据进行一次“初始化”，之后只能检测已经初始化的属性的变化。这也就是为什么使用了this.employeeInfo[res.type] = res.value，但是Vue并没有触发更新。这种情况下，需要使用this.$set来告诉Vue这个属性已经被更新了。

this.$set：this.$set 是 Vue 提供的一个全局方法，它用于在对象上添加响应式属性。它接受三个参数：对象本身，要添加的属性名，以及属性的值。当使用 this.$refs.employeeInfo.validateField(res.type) 时，Vue 将会追踪这个新的属性，并且在更新时会触发视图的重新渲染。

元素校验的问题：在的情况中，Element UI 可能依赖于 Vue 的响应式系统来进行字段校验。因为直接对对象进行属性赋值时，Vue 并不知道这个变化，所以它也无法触发 Element UI 组件的校验。但是使用了 this.$set 方法后，Vue 就能够捕捉到这个变化，并且通知相关的组件进行更新和校验。

总结，使用this.$set方法可以告诉Vue有新的属性被添加进来了

更详细的vue响应式系统参考

2、vue单页面应用打包后相对路径、绝对路径相关问题

运维部署时因特殊要求打包后html文件中用相对路径引入
如：<link href="./static/css/main.52330c1c.css" rel="stylesheet">，
但是vue2项目默认打包后的文件时绝对路径
如：<link rel=stylesheet href=/cdn/iconfont/1.0.0/index.css>

解决方法：配置 vue.config.js文件: publicPath: './'，老版本中为assetsPublicPath
具体解决参考文章