Vue数组踩坑日记props对象里面的部分数组改变无法重新渲染,视图没有根据数据变化。

首先声明一个组件然后往组件里面丢对象
在这里插入图片描述
html是在渲染以后修改数组
在这里插入图片描述
js代码更改对象中的数组
在这里插入图片描述
**

  1. vue有说明在数组直接通下标改变是不会被观察到的所以我试了(vue.set但是我并不是通过下标改变而是直接改变整个组数所以一样没用)**

2. 然后我又试试了强制更新this.$forceUpdate()这个倒是生效

  1. 后面我又尝试使用push来试试结果一样失败了。
    但是具体为什么还是没找到原因,后面去观察了一下两个数组再赋值前是不是有什么不同,真的发现了不同,一个数组里面带了Observer这种可以正常被观察到,并且重新渲染在这里插入图片描述

而另外一种不带Observer属性的是无法被观察到的
在这里插入图片描述

这个是因为父组件根本没有这个属性 zbyaoqiu

!是我这个按钮在被我点击的时候才设置的属性,本属性属于组件自己,因为组件的特性改变组件自己的属性并不会影响到父组件。所以只要在父组件创建的生命周期cerated设置属性就可以了

看到这么多人访问这个应该和我一样是最常见的bug那我再补充一些。如果数据变了视图没刷新可能是因为以下问题

  1. 数据操作没有用vue的方法所以视图无法刷新 使用Vue.set Vue.delete 即可解决
  2. 视图有缓存导致页面没有刷新 这个问题说来话长 解决方法就是给元素加个唯一key <div :key='id'>hello world<div>
  3. 强制刷新视图函数 this.$forceUpdate() (这个方法不推荐,主要是 1-2引起的,如果是1引起的使用这个方法无效 2引起的有效)
  4. 还有就是自己操作不当,如同本文父子组件通信中在子组件里面新增了数组父亲当然不知道

猜你喜欢

转载自blog.csdn.net/qq_35189120/article/details/83114510
今日推荐