Vue进阶（幺肆零）：vue 新增数组或对象更新后，视图不更新的解决方案_vue 数组不显示(1)

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

文章目录

• • 一、前言
    • 二、场景复现
    • 三、拓展阅读

---

一、前言

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

二、场景复现

需求：在使用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 )

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

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

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

参数：

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

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。