夜晚的月，想着怀念的人

前言

最近在写老师安排的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进行数据的更新

喃喃自语

纸上得来终觉浅，绝知此事要躬行。

大家好，我是博主宁在春：主页

一名喜爱文艺却踏上编程这条路线的小青年。

心愿：咱们，待别日相见时，都已有所成。