vue.$set(),vue什么情况下使用set
这篇文章主要介绍了Vue .$set失效的坑问题发现及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
偶然在项目中发现Vue.$set失效
有这样一个需求添加数据过滤用左边是控件选择中间是条件右边是值
因为会根据控件不同渲染不同的值选项控件
埃尔-表格内嵌
El-form-item style= margin-bottom:20px；
El-select v-model= data[props。prop] @ change= data[props。值]=
埃尔选项
v-for=控件中的项
:key=item.id
:value=item.id
:label=item.label
/el选项
/el-select
/El-表单-项目
El-form-item style= margin-bottom:20px；
El-select v-model= data[props。类型]
埃尔选项
v-for=条件中的项目
:key=item.code
:value=item.code
:label=item.name
/el选项
/el-select
/El-表单-项目
El-form-item style= margin-bottom:20px；
表单控件v-if= control :control= control :value= data[props。value] @ input= onValueChange /表单控件
El-input v-else:value= data[props。value] @ input= onValueChange /El-input
/El-表单-项目
埃尔-表单-项目
El-button type= primary icon= El-icon-plus @ click= add /El-button
/El-表单-项目
/el格式
{
道具：{
道具：{
类型：对象，
默认值：()=({
道具："道具",
值："值",
类型："类型"
})
}
},
data(){
返回{
数据：{
}
}
},
方法：{
onValueChange(val){
这个. set(this.data，this.props.value，val)
}
}
//.
}
代码片段
由于控件身份的不确定性所有数据并不能提前预设好键自然无法响应所以在onValueChange使用了这个10.95美元一套动态添加数据实现响应
复现可以发现值输入框内的数据并不能实时响应
明明用了$set却不能响应一番排查后发现只要切换控件后价值值就不能响应但是只要在切换前随便输入点啥再切换就没问题
又是一番排查后发现
El-select v-model= data[props。prop] @ change= data[props。值]=
删除@改变事件后故障解决
问题出现在data[props.value]=
遂查看某视频剪辑软件源码
//vue/src/core/observer/索引。射流研究…源码片段
/**
*设置对象的属性。添加新属性和
*如果属性不存在，则触发更改通知
*已经存在。
*/
导出函数集(target: Arrayany Object，key: any，val: any): any {
if (process.env.NODE_ENV！==生产
(isUndef(target) isPrimitive(target))
) {
警告(` 1无法对未定义、空或原始值设置反应属性：${(target: any)} `)
}
if(数组。is array(target)isValidArrayIndex(key)){
目标。长度=数学。最大(目标。长度，键)
目标.拼接(键，1,值)
返回值
}
如果（键入目标！（在对象.原型中键入)){
目标[键]=值
返回值
}
const ob=(target: any).__ob__
如果（目标.是vue (ob。卒于虚拟机计数){
process.env.NODE_ENV==生产警告（
避免向某视频剪辑软件实例或其根$数据添加反应性属性
在运行时-在数据选项中提前声明。
)
返回值
}
如果(!ob) {
目标[键]=值
返回值
}
defineReactive(ob.value，key，val)
业务部门通知()
返回值
}
可以发现在定义活动之前判断了键是否存在于对象之内若存在就跳过了
坑就在这多次翻阅Vue .$set文档并未发现$set不能为已存在的键添加监测对象
删除data[props.value]= 改为onValueChange(" ")完美解决问题
总结
Vue .$set之前一定要对象内键不存在不然只会更新值并不会为该钥匙添加响应监测
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。