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

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

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

  

  

---

一、前言

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

二、场景复现

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

参数：

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

{Object | Array} target

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

{string | number} propertyName/index

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

**总结**:

*   函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

*   它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> Tips:

> 其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

> 

> 我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 **优劣势**。

> 

> 理解和学习它们的理念与优势，合理地 **设计融合**，将优秀的软件编程思想用于提升我们应用；

> 所有设计思想，最终的目标一定是使我们的应用更加 **解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全**；