Vue中methods、watch和computed区别

在写dojay-md的时候，有一个监听输入内容变化的方法，大致代码如下：

methods: {
    // ... 省略代码...
    editor.on('change', () => {
        const mdValue = editor.getValue()
    })
    // ... 省略代码...
}

要在change以后，对mdValue做一个处理，当时的想法是直接在methods方法里面写一个方法来处理。如下：

methods: {
    // ... 省略代码...
    editor.on('change', () => {
        const mdValue = editor.getValue()
        this.valueChange(mdValue)
    }),
    valueChange(value) {
        // 搞事情
    }
    // ...省略代码...
}

总感觉不太对劲儿，我为何不写在watch或者computed里面呢？？？--- 因为我是渣渣。

compunted: {
    mdValue() {
        // 搞事情  
    }
},
// or
watch: {
    mdValue () {
        // 搞事情
    }
}

问题来了，methods、watch、computed都可以实现这个功能，那这三个的区别是啥呢？

methods、watch、computed区别

1. watch和computed是以Vue的依赖追踪机制为基础的，当某一个数据发生变化的时候，所有依赖这个数据的相关数据会自动发生变化。
2. methods方法是需要手动去调用的。

watch和computed区别

1. computed会对数据进行缓存，watch不会缓存
2. watch可以支持异步操作，computed不可以，如果要在数据变化的时候进行异步操作或者是比较大的开销，那么watch为最佳选择。
3. watch的数据如果在data中不存在的话，是不能watch的；computed的数据在data中存在是会报错的。
4. watch擅长处理的事情：一个数据变化影响多个数据；computed擅长处理的数据：多个数据影响一个数据

todo:

1. watch和computed是怎么实现的（源码）
2. computed是怎么进行数据缓存的（源码）