vue子组件(图表)数据更新而视图不更新的问题解决(附深度监听与立即监听)

背景:子组件是echarts的柱状图,数据datas以数组形式由props传递进来

思路:通过watch监听datas的改变,记得加上立即监听和深度监听

 watch: {
        datas: {
            handler(val) {
                this.$nextTick(() => {
                    this.initChart();
                });
            },
            immediate: true,
            deep: true
        }
    },
// 也可能导致内存溢出,消耗性能,如果发现datas改变时卡顿最好换一种方法去处理

关于深度监听,我参考其他博主的博客,结合个人理解来看,是因为vue的响应式原理导致的普通监听无法检测到对象的某个属性直接发生的改变,而只能监听到对某一个obj赋值(改变对象对应的堆中的指针),一般情况都建议加上深度监听。

由于我觉得该博主写的很不错,以下引用http://t.csdn.cn/vp8wW

deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。’

如果只需要监听对象中某一个属性值的变化,就不要使用deep:true了,推荐如下方法(字符串形式监听)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,父组件调用组件的方法刷新组件数据时,组件视图不会自动更新。这是因为Vue的响应式系统无法检测到这种直接的数据变化。为了解决这个问题,你可以使用以下方法之一: 1. 使用Vue的事件机制:在组件中,你可以定义一个自定义事件,并在父组件监听该事件。当父组件需要刷新组件数据时,可以通过触发该事件来实现。在组件中,你可以在事件处理方法中更新数据,并通过Vue的强制更新机制来强制刷新组件视图。具体代码如下: ```javascript // 组件 <template> <div> <!-- 组件视图 --> </div> </template> <script> export default { data() { return { // 组件数据 }; }, methods: { // 组件的方法 refreshData() { // 刷新组件数据 this.$emit('refresh'); } } }; </script> // 父组件 <template> <div> <button @click="refreshChild">刷新组件</button> <child-component @refresh="forceUpdateChild"></child-component> </div> </template> <script> export default { methods: { refreshChild() { // 调用组件的刷新方法 this.$refs.child.refreshData(); }, forceUpdateChild() { // 强制更新组件视图 this.$refs.child.$forceUpdate(); } } }; </script> ``` 2. 使用Vue的`$refs`属性:父组件可以通过`$refs`属性引用组件实例,并直接调用组件的方法来刷新数据。然后,你可以通过Vue的强制更新机制来强制刷新组件视图。具体代码如下: ```javascript // 组件 <template> <div> <!-- 组件视图 --> </div> </template> <script> export default { data() { return { // 组件数据 }; }, methods: { // 组件的方法 refreshData() { // 刷新组件数据 } } }; </script> // 父组件 <template> <div> <button @click="refreshChild">刷新组件</button> <child-component ref="child"></child-component> </div> </template> <script> export default { methods: { refreshChild() { // 调用组件的刷新方法 this.$refs.child.refreshData(); // 强制更新组件视图 this.$nextTick(() => { this.$forceUpdate(); }); } } }; </script> ``` 上述方法中,都使用了Vue的强制更新机制`$forceUpdate()`来强制刷新组件视图。请根据你的具体情况选择其中一种方法来处理组件数据更新视图更新问题

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值