vue.js 中 $set 使用场景、解决方案比较、原理

使用场景:

实例创建之后添加新的属性到实例上,它不会触发视图更新。

由于 JavaScript 的限制,Vue 不能检测以下变动的数组。

当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue 

当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组。 


解决方案比较:

1.推荐在 data 对象上声明所有的响应属性。

    两个原因:

1).data 对象就像组件状态的模式(schema)。在它上面声明所有的属性让组件代码更易于理解。

 2).添加一个顶级响应属性会强制所有的 watcher 重新计算,因为它之前不存在,没有         watcher 追踪它。这么做性能通常是可以接受的(特别是对比 Angular 的脏                 检 查,但是可以在初始化时避免。 

 2.Vue.set,vm.$set()  ,方法调用时,页面会全部更新一遍。

  3.数组的splice, concat 方法

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容