博客地址: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等方式生成新数组对其赋值)
—————————————————————————————
复制代码
1
2
3
4
5//对象属性不能更新数据 this.form.img = res.data.file_name //解决方法 this.$set(this.form,'img',res.data.file_name)
在vue父子子组件传值过程中,子组件并不能实时根据父组件的值改变,这时可以使用vue 的watch属性来监听父组件传过来的值,再执行操作
复制代码
1
2
3
4
5
6
7//基础数据类型 watch:{ num1(newVal){ this.img = newVal } }
复制代码
1
2
3
4
5
6
7
8
9
10
11//数组的监听 watch:{ arr1: { handler(newVal) { this.tableData = newVal }, deep: true //划重点 } }
复制代码
1
2
3
4
5
6
7
8
9
10
11//对象的监听 watch:{ obj1: { handler(newVal) { this.form = newVal }, deep: true //划重点 } }
那么,有时,我们可能会遇到这种情况,vuex中的数据,在子组件中并不能实时更新,但是在子组件中无法使用watch直接监听this.$store.state,这时可以使用computed来配合watch监听
复制代码
1
2
3
4
5
6
7
8
9
10
11
12watch:{ list(newVal){ //最好使用vue.set更新数据 this.$set(this.treeData,'lists',newVal) } }, computed:{ list(){ return this.$store.state.menu } }
最后
以上就是勤恳灯泡最近收集整理的关于vue 数据改变,页面不刷新?父子组件值不能实时同步?vuex数据监听的全部内容,更多相关vue内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复