vue 新增数组或对象更新后，视图不更新的解决方案

一、前言

在项目开发过程中，若将页面元素全部绑定于一个表单中，且页面中的某些元素并未直接获得，在获取页面操作值时就会出现意外效果，例如不能重置页面元素。

二、场景复现

需求：在使用el-select设计表单下拉框时，若后台返回的下拉框数组长度为1，则默认选中第一个元素。

思路：后台返回值后直接将第一个元素的value赋值给el-select的v-model。

created() {
....
    this.MissionTemplateForm.state = this.StatusOptions[0].display_name
  },

但是后台方法返回值后，为el-select赋值前，MissionTemplateForm已经赋值了response.returnobj，导致MissionTemplateForm的结构被破坏，故需要对MissionTemplateForm中的属性进行重新设定。需要使用

Vue.set( target, propertyName/index, value )

大家都知道vue是双向绑定响应式更新视图的，这个自动更新视图主要是针对在data里面定义的属性或者对象的键，比如有个data:{ test : 'test'};这里修改 test的值就可以自动更新相关的视图。但是，如果你后面添加一个新的属性进去然后修改 是没法自动更新的，这就涉及vue的双向绑定原理。

vue 默认的是将data 属性添加到侦察器（发布者——订阅者模式）上观察，如果有变化就响应视图更新，后面新增的属性和对象是没有做添加到观察器的这步操作的，所以需要手动添加，就需要用到Vue的set方法。

Vue.set(app.arr,1,'qq')

参数：

第一个参数想要修改的数组或者对象

{Object | Array} target

第二个参数想要修改的对象名称或者对应的下标

{string | number} propertyName/index

第三个参数想要修改成功后的值

{any} value

返回值是第三个参数 value

示例如下：

 let obj = this.dryingList[ind];
 this.$set(obj, "nodianzanflag", true);

三、拓展阅读

• https://cn.vuejs.org/v2/api/#Vue-set

• 《Vue进阶（九十七）：vue给对象动态添加属性和值》

• 《Vue进阶（九十八）：Vue.set()和this.$set()介绍》

四、延伸阅读

在前期博文《Vue进阶（六十四）：iframe在更改了src之后对应的网页并未刷新》，讲解了解决iframe下src变化后，页面内容未刷新问题，解决方法是在更改iframe src属性值之前加上document.getElementById(iframe的id).contentWindow.location.reload(true);处理逻辑，但是在后续项目开发过程中发现，页面存在调用后台请求方法2次，不符合业务需求，且会给服务器造成请求压力。

检查后发现，是因为页面iframe的重复构建促使iframe页面重复请求后台方法，虽然iframe为hidden属性隐藏并未展示。