美文网首页我爱编程
vue.js 中 $set 使用场景、解决方案比较、原理

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

作者: 邓海琪 | 来源:发表于2018-03-02 10:46 被阅读0次

使用场景:

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

由于 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 方法

相关文章

网友评论

    本文标题:vue.js 中 $set 使用场景、解决方案比较、原理

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