vue响应式对象

最新推荐文章于 2026-05-06 11:15:35 发布

原创最新推荐文章于 2026-05-06 11:15:35 发布 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #响应式

VUE 同时被 2 个专栏收录

18 篇文章

订阅专栏

经验总结

11 篇文章

订阅专栏

Vue中的数据变化能够驱动视图更新，但当对象的深层属性变化时，Vue可能无法监听到。通过$set方法可以将新增的属性转换为响应式，以确保视图更新。直接修改未在data()中初始化的属性或新增属性不会自动响应化，而数组的push等操作由于Vue的特殊处理可以触发更新。

在vue中与视图中绑定的数据，其数据的变化会驱动视图的更新，这是因为vue是响应式

那么有没有那么一种情况数据的变化视图没有变化呢？

答案肯定是有的，例如对象的属性变化vue并不能监听到，因此数据的变化并不能驱动视图更新

vue也提供了$set方法来更新对象属性值的变化，但是也会有奇怪的现象比如

<template>
  <div class="test">
    <div>{{people.male.name}}</div>
    <button @click="testData">test</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  data () {
    return {
      people: {
        male: {
          name: 'man',
          hair: 'short',
        },
      }
    }
  },
  methods: {
    testData() {
      this.people.male.name = 'dust';
    },
  },
}
</script>

以上代码直接改变people.male.name绑定的视图直接更新了

为什么在嵌套两层的对象的值，直接赋值能够改变，那$set()没有意义了？

实际上是初始化在data内的数据vue已经全部处理成响应式对象

注意这里只是在初始化时候的键值对是响应式对象的，下面代码并不会改变cloth的视图

<template>
  <div class="test">
    <div>{{people.male.name}}</div>
    <div>{{people.male.cloth || '111'}}</div>
    <button @click="testData">test</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  data () {
    return {
      people: {
        male: {
          name: 'man',
          hair: 'short',
        },
      }
    }
  },
  methods: {
    testData() {
      this.people.male.name = 'dust';
      this.people.male.cloth = 'blue';
    },
  },
}
</script>

初始的时候显示的是111内容，在执行完testData()后，name变为dust，但是cloth仍然是111，因为新增的属性并不是响应式的

有人会说这个时候cloth原本并不存在，这个时候是不会变，那在新增完已经存在的情况下，再次修改cloth的值，会触发视图更新吗


<script>
export default {
  name: 'HelloWorld',

  data () {
    return {
      people: {
        male: {
          name: 'man',
          hair: 'short',
        },
      }
    }
  },
  methods: {
    testData() {
      this.people.male.name = 'dust';
      this.people.male.cloth = 'blue';
    },
    testAgain() {
      this.people.male.cloth = 'red';
    },
  },
}
</script>

先执行testData()，这时对象内已经存在了cloth，之后再执行testAgain()，这时视图同样不会发生变化，还是因为此属性并不在响应式监听范围内

那么就用$set()方法即可把其变为响应式的了

this.$set(this.people.man, 'cloth', 'blue');

这时视图会触发更新

综上所述：

data()内初始化数据vue会处理成响应式属性
$set()可以把新增的处理成响应式属性
直接添加新的属性并不能成为响应式属性
数组push等操作可触发更新vue已对此类操作做了特殊处理