vue中的$set和Vue.set方法

2,292 阅读2分钟

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情”

学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~
如果大家喜欢,可以点赞或留言💕~~~~,谢谢大家⭐️⭐️⭐️~~~

使用场景

当我们使用vue开发时经常会遇到当vue实例已经创建好了,有时候需要再次给数据赋值时,并不能在视图中改变 在vue文档中写着如果在实例创建之后添加新的属性到实例上,它不会触发视图更新 因此比如我们修改一个数组其中的一个值,或者添加一条数据时,不管用。 所以需要响应式使用set方法

$set和Vue.set介绍

Vue.set( target, propertyName/index, value )

  • 参数

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value
  • 返回值:设置的值。

  • 用法

    向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

    注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

vm.$set( target, propertyName/index, value )

  • 参数

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value
  • 返回值:设置的值。

  • 用法

    这是全局 Vue.set 的别名

  • 参考:Vue.set

案例用法

//this.blockData1 要改变的数组,,索引值,,,value值
data = [
    {},
    {},
]
//改变索引对应的值
Vue.set(this.data, index, item)

//this.blockData1 要改变的对象,,新增的字段名,,,value值
data = {
    a:'1',
    b:'2',
}
//增加c字段
$Vm.$set(this.data, 'c', format1000);

近期热门文章

专栏推荐

推荐一下自己的专栏,欢迎大家收藏关注😊~