Vue数组踩坑日记props对象里面的部分数组改变无法重新渲染,视图没有根据数据变化。
首先声明一个组件然后往组件里面丢对象;html是在渲染以后修改数组js代码更改对象中的数组;**vue有说明在数组直接通下标改变是不会被观察到的所以我试了(vue.set但是我并不是通过下标改变而是直接改变整个组数所以一样没用)**2. 然后我又试试了强制更新this.$forceUpdate()这个倒是生效后面我又尝试使用push来试试结果一样失败了。但是具体为什么还是...
·
首先声明一个组件然后往组件里面丢对象
;
html是在渲染以后修改数组
js代码更改对象中的数组
;
**
- vue有说明在数组直接通下标改变是不会被观察到的所以我试了(vue.set但是我并不是通过下标改变而是直接改变整个组数所以一样没用)**
2. 然后我又试试了强制更新this.$forceUpdate()这个倒是生效
- 后面我又尝试使用push来试试结果一样失败了。
但是具体为什么还是没找到原因,后面去观察了一下两个数组再赋值前是不是有什么不同,真的发现了不同,一个数组里面带了Observer这种可以正常被观察到,并且重新渲染
而另外一种不带Observer属性的是无法被观察到的
;
这个是因为父组件根本没有这个属性 zbyaoqiu
!是我这个按钮在被我点击的时候才设置的属性,本属性属于组件自己,因为组件的特性改变组件自己的属性并不会影响到父组件。所以只要在父组件创建的生命周期cerated设置属性就可以了
看到这么多人访问这个应该和我一样是最常见的bug那我再补充一些。如果数据变了视图没刷新可能是因为以下问题
- 数据操作没有用vue的方法所以视图无法刷新 使用Vue.set Vue.delete 即可解决
- 视图有缓存导致页面没有刷新 这个问题说来话长 解决方法就是给元素加个唯一key
<div :key='id'>hello world<div>
- 强制刷新视图函数 this.$forceUpdate() (这个方法不推荐,主要是 1-2引起的,如果是1引起的使用这个方法无效 2引起的有效)
- 还有就是自己操作不当,如同本文父子组件通信中在子组件里面新增了数组父亲当然不知道
更多推荐
已为社区贡献2条内容
所有评论(0)