Vue中为对象添加属性和值，属性更新了视图不更新this.$set(obj, key, value)

note

我们在Vue项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性，比如我们有一个student对象，我们为student对象添加一个age属性并赋值，之后我们打印这个student对象是能看到age属性和值的，但是看看视图层好像并没有更新，当我们遇到这个问题我们该如何解决呢?

1、this.$set(obj, key, value)

this.$set(obj对象名称, key对象添加的属性, value添加的属性的值)

<script>export default { data() {   return {     student: {       name: '张三',     }   } }, methods: {   setMessage() {     this.$set(this.student, 'age', 18)     console.log(this.student)   } }}</script>

2、通过Object.assign(target, sources)方法

<script>export default {  data() {    return {      student: {        name: '张三',      }    }  },  methods: {    setMessage() {      this.student.age = 18      this.student = Object.assign({}, this.student)      console.log(this.student)     }  }}</script>

3、拓展this.$set

3.1、设置数据数组对象元素

<script>export default {  data() {    return {       items: ['a', 'b', 'c']    }  },  methods: {    setMessage() {      this.$set(this.items,2,"ling");      console.log(this.items) //=>[‘a’, ‘b’, ‘ling’]    }  }}</script>