夜晚有明月，梦里有佳人
前言
最近在写老师布置的vue项目，真的说实话，每天真就是在百度、google、bing等各个搜索引擎之间反复横跳，不然就是掘金搜一搜、思否搜一搜，还有CSDN看一看。我的前端是吃百家饭长大的，每天不知道要遇到多少问题，然后基本上周围所有的前端同学都被我问到了，基本上就是谁有空就拉谁来教我。
前端太多细节问题了，一旦遇到没有接触过问题，就会非常麻烦，如果有学习前端的后端小伙伴，我觉得最快熟悉前端的方式，就是整个项目写。这可能是最快上手前端框架的方式了吧。
一、vue中修改数组对象下的数组里的某一个对象
我的对象结构如下：
sections: [ { id: 0, addInputBool: true, generallnformationBool: false, generallnformation: '', updateGenerlInfoImgBool: false, pullUpQusetionBool: true, upQusetionBool: true, downQuestionBool: false, questions: [ { id:'', name:'', isCheckbox:'', answer:'', conditions:[], dropdownMultiSelections:[] } ] } ]
要实现的需求是通过数组下标，修改数组里某一个对象。
最开始我的想法就是将数值一个一个的赋值进数组，和写Java代码一样的思维。
this.sections[index].question[id]=this.addQuestion
这里的index和id是我们点击页面修改传过来的值，最后发现这样一直报错，不能够实现修改。
后来查百度说：
问题：
根据数组的索引直接赋值没法修改数组的中对象。
原因：
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
然后就查到了要使用this.$set来进行操作
解决：
// 数组：第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值 this.$set(sections[index].question,id,{ id:'123', name:'宁在春', isCheckbox:true, answer:'测试集', conditions:[1,2,3], dropdownMultiSelections:[a,b,c] }); 或者 // 对象：第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值 Vue.set(sections[index].question,id,{ id:'123', name:'宁在春', isCheckbox:true, answer:'测试集', conditions:[1,2,3], dropdownMultiSelections:[a,b,c]})
看到有这个this.$set方法，就想去了解了解，看看它还有什么应用场景，方便下次有需要的时候，能够直接用上。
二、this.$set
2.1、this.$set能够实现什么功能
官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hello，ningzaichun'）
简单说即是：当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了
2.2、如何使用 this.$set
Vue中this.$set的用法 // 数组：第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值 // 对象：第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值 Vue.set( target, propertyName/index, value ) 参数 {Object | Array} target {string | number} propertyName/index {any} value
小小案例：
<template> <div class="page" id="app"> <button @click="add">设置</button> <ol> <li v-for="(item, index) in arr" :key="index">{{ item.name }}</li> </ol> </div> </template> <script> export default { data () { return { arr: [ { name: '宁在春', age: 21 }, { name: '北桑夏', age: 21 } ] } }, mounted () { this.arr[2] = { name: '青冬栗', age: 23 } // 数组的值发生了变化 但视图没有更改 console.log(this.arr) }, methods: { add () { this.$set(this.arr, 2, { name: '青冬栗', age: 23 }) // $set 触发视图更改 } } } </script>
target: 要更改的数据源（可以是一个对象或者数组） key 要更改的具体数据 （索引） value 重新赋的值
在vue的生命周期钩子函数mounted中，我们手动的在数组加入了一个值，但是并不会直接在页面视图进行更新。
初始化的页面是这样的。
但是在控制台其实是已经打印出来的拉
但是如果我们点击按钮的设置，视图就会立马发生改变
这就是this.$set一个妙用之处。
2.3、this.$set 应用场景
1、在我们使用vue进行开发中，可能会碰到一种情况，当已经生成vue实例后，再次去给数据赋值或者添加数据，并不能同步更新到数据上面去。
2、另外就是像我这种，利用this.$set进行数据的更新
自言自语
纸上得来终觉浅，绝知此事要躬行。大家好，我是博主
宁在春：主页一名喜欢文艺却踏上编程这条道路的小青年。
希望：
我们，待别日相见时，都已有所成。
