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

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
    }
}
发布了25 篇原创文章 · 获赞 4 · 访问量 123万+

猜你喜欢

转载自blog.csdn.net/weixin_45266125/article/details/102807663