Vue2 (opens new window) Vue3 (opens new window) Vue Router (opens new window) VueX (opens new window) Vue-devtools (opens new window)

vue 中父级属性改变，子组件 props 属性未改变，且不能触发监听的问题解决及响应式原理分析

1.场景

调用自定义组件的时候，父级传给子组件的值可能是异步的，然后这也分两种情况

1.子组件的值只需要在初始化时获取，之后就不变了

2.子组件的值还会变化，在后面的操作中有异步请求，跟随父级拿到的数据变化

这时会有父级已经请求拿到数据了，但是子组件的值还没变，也没有触发回显，界面没有改变

2.方法

1. v-if 控制组件拿到数据再渲染，可以解决第一种情况

2. 子组件用 watch 监听父级传的 props，有局限性

3. 触发响应式

3.响应式

1. 变量，声明时有指明的默认属性名，则其为响应式，否则为非响应式。

解决：可以在声明时直接初始化默认属性值，防止额外属性的出现。或者麻烦一点，重新对整个对象赋值

2. 数组，用索引修改数组某一项，或修改数组长度，都是非响应式。

解决: 可以用 Array.splice 方法来替换指定位置的值，不用索引，

3. this.$set(item, index/property, val)

4. 异步：this.$nextTick()