美文网首页让前端飞Web前端之路
vue中给对象/数组添加响应式属性/项

vue中给对象/数组添加响应式属性/项

作者: forJavascript | 来源:发表于2019-12-18 22:44 被阅读0次
上文谈到了vue的响应式原理,然后再回头理解该如何在vue中给对象/数组添加响应式属性/项,就简单多了

上文链接

我相信大部分同学都踩过这个坑: 诶? 为什么我改变了这个值,界面上没有更新呢?

原因很简单:直接修改对象属性或数组中的值时,vue没有给属性或值添加监听,即getter/setter方法
1. 给对象添加响应式属性
  • Vue.set(obj, key, value)

弊端: 不能一次性添加多个属性

  • Object.assign({},obj,src)

注意⚠️: 一定要跟空对象混合,这样才能触发设置getter/setter的代码

2. 给数组添加响应式的项
  • Vue.set(items, IndexOfItem, value)

  • items.splice(IndexOfItem, 1, value)

splice方法改变了原数组,会触发watcher

3. 修改数组长度
  • items.splice(length)

路漫漫其修远兮,吾将上下而求索。共勉 😶

相关文章

网友评论

    本文标题:vue中给对象/数组添加响应式属性/项

    本文链接:https://www.haomeiwen.com/subject/sehpnctx.html