Vue的一些小CASE

 

目录

1. 响应式数据更新
2. 父组件传递响应式数据子组件更新问题
3. 父组件通过v-if/v-show对子组件显示隐藏问题
4. vue-router的相关配置
5. 关于多个子组件共用一个父组件数据造成子组件相会影响

---

QA

Vue官网对技术点都一一进行了提及，熟读文档，多看文档

一、响应式数据更新？

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。在Vue中对于数组数据的更新，若不使用官方提供的数据方法去操作数组，数据就不会是响应的，参考Vue数组更新监测和Vue对象响应式。

对于对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：

var vm = new Vue({
  data:{
    a:1
    someObject:{a:0}
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的


// this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

// this.$set(this.someObject,'b',2)

总体来说，对象数据的更新可使用   Object.assign ( {} , '原始数据 Obj' ， ‘新数据  Obj‘ ) 进行数据更换    

                                                         this.$set( ‘原始对象数据 Obj ’ ，‘新增 key’ ， ‘新增 keyvalue’ )

                                                        Vue.set( ‘原始对象数据 Obj ’ ，‘新增 key’ ， ‘新增 keyvalue’ )