vue修改页面数据不渲染---this.$set()的使用方法

最新推荐文章于 2024-07-04 19:01:01 发布

roury

最新推荐文章于 2024-07-04 19:01:01 发布

阅读量1.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/roury/article/details/112370163

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中无法检测到数组和对象变化的情况，如对象属性的增删和数组项的直接修改。为确保数据响应性，需要使用`this.$set()`方法。文章通过实例展示了如何使用`this.$set()`更新数组和对象，并提供了相关实践代码。了解这一关键概念有助于提升Vue应用的正确性和性能。

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

前情提要：以下三种情况Vue 不能检测数组和对象的变化

对象中 property 的添加或移除：testObj.a='参数' //testObj没有参数a
使用索引直接设置一个数组项：testArray[1]='数组项'
修改数组长度：testArray.length = 4

此时就需用使用this.set()/this.$set()来保证他们的响应性。
(vm.$set是全局Vue.set方法的别名)
一. 用法
this.$set( target, key, value )，其中：
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据（对象属性名或者数组下标）
value ：重新赋的值
二. 具体实践

data() {
  return {
    testArray: [],
    testObj: {},
  }
},
created() {
  this.$set(this.testArray, 0, '1')
  this.$set(this.testObj, 'Name', 'name')
  console.log('数组', this.testArray)
  console.log('对象', this.testObj)
}

三. 效果：
在这里插入图片描述
参考链接：
4. https://cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
5. https://www.cnblogs.com/qlb-7/p/12746481.html