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
}
}

最后

以上就是勤恳灯泡为你收集整理的vue 数据改变，页面不刷新?父子组件值不能实时同步？vuex数据监听的全部内容，希望文章能够帮你解决vue 数据改变，页面不刷新?父子组件值不能实时同步？vuex数据监听所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。