详细讲解一下watch和computed的区别以及选择

Vue.js中，watch和computed都是用来监听数据变化的方法，但它们的实现方式和使用场景有所不同。

watch可以监听任何数据的变化，包括普通变量、对象、数组等。当数据变化时，watch中的回调函数会被触发，可以在回调函数中执行一些自定义的操作。

watch的语法如下：

watch: {
  dataToWatch: function(newVal, oldVal) {
    // do something
  }
}

其中，dataToWatch是要监听的数据，newVal是数据变化后的值，oldVal是数据变化前的值。

使用watch的场景通常是：

computed是计算属性，它可以根据已有的数据计算出一个新的值，并将该值缓存起来。当计算属性依赖的数据发生变化时，computed会重新计算该值，并返回结果。

computed的语法如下：

computed: {
  computedValue: function() {
    // calculate something
    return result
  }
}

其中，computedValue是计算属性的名称，result是计算出的值。

使用computed的场景通常是：

在选择watch和computed时，需要考虑以下因素：

执行时间：watch的回调函数是在数据变化后立即执行的，而computed是在该属性被访问时执行的。因此，如果需要在数据变化后立即执行一些操作，应该使用watch；如果需要在数据被访问时执行一些操作，应该使用computed。
缓存：computed会缓存计算结果，如果依赖的数据没有发生变化，就不会重新计算该值。这样可以提高性能，避免重复计算。而watch不会缓存任何结果，每次都会重新执行回调函数。
数据类型：watch可以监听任何数据类型的变化，而computed只能监听响应式数据的变化。因此，如果需要监听非响应式数据的变化，应该使用watch。
功能：watch可以执行任何操作，比如发送请求、调用接口等；computed只能执行计算操作，不能执行其他操作。因此，如果需要执行非计算操作，应该使用watch。

综上所述，watch和computed都是非常有用的方法，但它们的使用场景和实现方式有所不同。在选择时，需要根据具体的需求和数据类型进行判断。