---

前言

相信大家和我一样，在开发中总是遇到一个问题。

为啥我修改v-for遍历的数组，视图却没有更新？？？当我点击其他操作重新渲染后，又更新了？？？这不会是vue出bug了吧

这项问题其实正是由vue的双向绑定造成的，vue在2.x的版本中还在使用defineProperty方法，这就是defineProperty中的一个问题。所以在vue3.0中，使用了proxy取代了defineProperty。对此本文不多做解释，有兴趣的朋友可以去查阅下资料。

回到正题，让我们看看怎么在2.x中解决这个问题吧！

一、案例

为了方便我们了解问题，我写了一个测试代码

<template>
<div id="app">
  <div>
    <button type="" @click="change">改变数组</button>
    <p>{{student.name}}</p>
    <p>{{student.age}}</p>
    <span v-for="(item,index) in info" :key="index" style="margin-right:20px">{{item}}</span>
  </div>
</div>
</template>

<script>
export default {
  name: 'App',
  components:{
  },
  data() {
    return {
      student:{
        name:'二蛋'
      },
      info:[0,1,2]
    }
  },
  methods: {
    change() {
      this.student.age = 12
      console.log(this.student);
      this.info[1] = 3
      console.log(this.info);
    }
  },
}
</script>

<style>
body{
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
}
</style>

预期效果：点击按钮后，我们给student对象增加一个age属性，改变数组第二个元素为3。并打印改变后的对象和数组。

让我们点击看一看：
这里可以从打印区发现，我们已经给对象增加属性而且改变了数组，那奇怪的事来了，为什么我的页面上展示为什么没有变呢？

这就是defineProperty的问题啦。如果有同学感兴趣，可以看一下下面这一篇文章ES6 系列之 defineProperty 与 proxy

这里，我只教大家怎么使用$set去解决这个问题哦

二、解决方法

$set

this.$set( target, propertyName/index, value )
参数：
// 你需要改变的数组或对象
{Object | Array} target
// 你需要改变的键名或索引
{string | number} propertyName/index
// 改变后的值
{any} value

让我们一起来试试吧：

change() {
      this.$set(this.student,'age',12)
      console.log(this.student);
      this.$set(this.info,1,3)
      console.log(this.info);
    }

效果图：
可以发现，我们的视图成功更新了。

小知识：在vue中，还有另一种写法，Vue.set()

那么有同学会问了，那有什么不同呢？

其实他们两个的原理和参数是完全相同的哦，具体使用哪一个就看你的爱好啦。

总结

文章只是简单介绍了遇到此类情况该怎样去解决，如果想了解原理的话，可以去上面发的大佬博客看一看哦！

二次传送门：ES6 系列之 defineProperty 与 proxy