对vue watch的几点疑问

问题描述

在vue里面第一个要避免使用的就是eventBus,虽然它很方便,但是它带来的后果是更加严重的,可能引发很多难以查找的bug。
第二个就是watch。当一个组件内有多个watch的情况下,很可能就会发生这么一种情况,不知道是哪个watch引起的bug,不知道是谁触发了watch。
所以,我感到很疑惑!
在vue中如何优雅的使用watch?
以及watch设计的初衷是什么?
既然是数据驱动的框架,不应该是通过数据变化引起组件变化吗?
而像watch这种监听数据变化这种方式是不是应该被剔除?

回答:

楼主只需要将watchcomputed进行对比:

  1. 监听的对象个数不同:
    watch只对一个对象进行监听
    computed对多个对象进行监听
  2. 有无返回值

为什么要和computed对比呢,因为两者的实现原理是一样的,都是通过观察者模式,并且用的时候的感觉也很相似,无非是监听的数据变化了触发的一系列动作。
那么watch的适用场景自然而然就出来了

需要对单个对象的变化做额外动作且无需返回值的

那如果有两个对象其中任意一个做变化,且不管其中哪个对象变化都是做相同的动作的时候应该怎么办呢


把这两个对象写在一个对象里面,再watch这个对象
例如:

data(){
    return {
        dataWrapper:{
            data1:null,
            data2:null
        }
    }
},
watch: {
    dataWrapper(){
        handler(){
            // do something...
        },
        deep: true
    }
}

或者

data(){
    return {
        data1:null,
        data2:null
    }
},
computed:{
    dataWrapper(){
        const {data1, data2} = this
        return {
            data1,
            data2
        }
    }
},
watch: {
    dataWrapper(){
        // do something...
    }
}

多个watch之间应该尽量避免数据耦合,上面介绍了一种解耦方式,抛砖引玉

存在即合理,没这个需求肯定不会出这个API

楼主加油

回答:

举个例子,比如我现在子组件中,需要实现这样一个功能,如果props中的某个对象发生了变化,那么就触发对应的methods。

那么这个时候你需要用什么方法来触发对应的methods呢,

这里很显然需要使用watch。

所以每个方法的存在,都是根据业务场景来的。

回答:

你这些问题真的很难回答,昨天我看到一句话,不能问一个技术的设计目的是什么,而是要问,我遇到了哪些问题,有哪些技术可以解决我的问题?

当代的软件框架基本都是建立在软件设计模式这个思维范畴内的,那么watch从语义和实际用途分析,显然是一种观察者模式。那么观察者模式本来就是应用于谁对变化的状态感兴趣,谁去“观察”这个状态。在某些情况下,确实需要跟踪观察值的变化,确实要知道变化前的值和变化后的值,那么就需要使用watch。

如果题主遇到了上面的问题,那么可以尝试watch。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注