对vue watch的几点疑问

Question

问题描述

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

Answer 1

楼主只需要将watch和computed进行对比：

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

楼主加油

Answer 2

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

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

这里很显然需要使用watch。

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

Answer 3

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

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

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