vue双向数据绑定this.$set(obj, key, value)的使用

最新推荐文章于 2024-07-09 18:00:00 发布

绿稚PENG

最新推荐文章于 2024-07-09 18:00:00 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue

原文链接：https://blog.csdn.net/yxorg/article/details/112916901

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在Vue.js中，直接给data里的对象添加属性不会更新视图，因为Vue无法监听到这种变化。解决方法包括使用`this.$set`或`Object.assign`。`this.$set`为对象添加getter和setter，使属性变动能被Vue检测到，从而更新视图。`Object.assign`创建了一个新对象并复制源对象属性，改变后的对象将触发视图更新。

摘要由CSDN通过智能技术生成

this.$set(obj, key, value)

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

<template>
  <div class="hello">
    <button @click="setMessage">添加属性</button>
    {{ student.name }}
    <input type="text" v-model="student.age">
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {
        name: '亚索',
      }
    }
  },
  methods: {
    setMessage() {
      this.student.age = 15
      console.log(this.student) //此时对象的值更改了，但是视图没有更新
    }
  }
}
</script>

在这里我们发现虽然这个对象身上已经有了该属性，但是视图层并没有更新该数据，是什么造成的呢？由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化。

解决方法：

利用this.$set(obj, key, value)

<script>
export default {
 data() {
   return {
     student: {
       name: '亚索',
     }
   }
 },
 methods: {
   setMessage() {
     this.$set(this.student, 'age', 15)
     console.log(this.student) // 数据和视图都已经更新
   }
 }
}
</script>

target: 要更改的数据源（可以是一个对象或者数组）
key 要更改的具体数据（索引）
value 重新赋的值

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

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