vue 数据改变，页面不刷新?父子组件值不能实时同步？vuex数据监听

博客地址：http://www.globm.top/blog/1/detail/40
vue双向绑定问题中，不能实现及时更新的问题：

• 不在data中显式声明的对象不能及时更新
• 在form中，经过v-model的变量 或 在其他html标签中 使用v-bind:方法的变量才能及时更新
• vue不能检测到对象属性的增加，修改，删除， 不能及时触发DOM的更新，需要借用其他的更新。
• vue不能检测数组的项修改（根据index）、length修改（仅此而已，可直接对数组重新赋值，如使用filter、map、concat、slice等方式生成新数组对其赋值）

—————————————————————————————

//对象属性不能更新数据
this.form.img = res.data.file_name
//解决方法
this.$set(this.form,'img',res.data.file_name)

在vue父子子组件传值过程中，子组件并不能实时根据父组件的值改变，这时可以使用vue 的watch属性来监听父组件传过来的值，再执行操作

//基础数据类型
watch:{
     num1(newVal){
         this.img = newVal
     }
}

//数组的监听
watch:{
    arr1: {
        handler(newVal) {
            this.tableData = newVal
        },
        deep: true        //划重点
    }
}

//对象的监听
watch:{
	obj1: {
        handler(newVal) {
            this.form = newVal
        },
        deep: true        //划重点
    }
}

那么，有时，我们可能会遇到这种情况，vuex中的数据，在子组件中并不能实时更新，但是在子组件中无法使用watch直接监听this.$store.state，这时可以使用computed来配合watch监听

watch:{
  list(newVal){
  		//最好使用vue.set更新数据
      this.$set(this.treeData,'lists',newVal)
  }
},
computed:{
    list(){
        return this.$store.state.menu
    }
}