版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_23980427/article/details/53899712
1.问题
今天用Vue的时候,发现一个问题:
array[index].flag = ture
对应的视图不发生变化
最后多方查寻发现,VUE对数组的直接操作index赋值监测不了
也就是说 下面这个代码最好不要在VUE中使用
this.arr[index]={...}
2.解决方法
官网专门提供了这种检查不了属性变化的API
Vue.set( object, key, value )
参数:
{Object} object
{string} key
{any} value
返回值: 设置的值.
用法:
设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象
使用实例:
this.$set(this.arr,index,value)
3.个人简单分析
在操作的过程中发现,没有被监测到的属性都有一个共同的特征,对应的属性没有对应的get,set方法。
我们再想想,VUE所谓的双向绑定是如何实现的呢?我们想一想是不是可以在对应的属性的set方法上做手脚,每一次对属性赋值的时候,都会触发set方法,set方法不就是一个万能的监听器了?
我想,通过$set主要就是对属性添加setter方法,进行监听。当然,我还只是一个刚刚接触的小白,还没有对VUE源码进行分析,这里只是一点小小的分析,希望对入坑的你有点帮助。
评论前必须登录!
立即登录