computed和watch的释义和使用场景

Vue.js 中的 computed 和 watch 是用来监控 Vue 实例中数据变化的两种方式，它们各自适用于不同的场景。

computed 的使用场景

1. 派生数据：当有一些数据是依赖于其他数据计算得出的，可以使用 computed 来创建一个计算属性，以保持这些派生数据的同步更新。

2. 模板中的过滤和处理：如果需要在模板中展示经过处理或者过滤后的数据，可以使用 computed 来实现对数据的处理和过滤，并且将处理后的数据直接在模板中使用。

3. 缓存结果：computed 计算属性默认具有缓存功能，只有在依赖的响应式数据发生改变时才会重新计算，这样可以避免不必要的重复计算。

   new Vue({
     data: {
       a: 10,
       b: 20
     },
     computed: {
       sum: function() {
         return this.a + this.b;
       }
     }
   });
   
   // 在模板中可以直接使用计算属性 sum，而无需手动调用计算方法
   

watch 的使用场景

1. 监听特定数据的变化：当需要监听某个数据的变化并且进行相应的操作时，可以使用 watch。例如，可以通过 watch 监听特定数据的变化并进行异步操作、网络请求等。

2. 深度监听：在需要深度监听对象或数组内部值的变化时，可以使用 watch 并设置 deep: true。

3. 监听路由变化：在 Vue Router 中，可以使用 watch 监听 $route 对象的变化，根据路由的变化执行相应的操作。

   new Vue({
     data: {
       message: 'Hello, Vue!'
     },
     watch: {
       message: function(newVal, oldVal) {
         console.log('消息发生变化：' + newVal);
       }
     }
   });
   
   // 当 message 数据发生变化时，会触发 watch 中的函数，并打印出新的消息内容
   

总的来说，computed 适合处理一些需要计算得出的数据，而 watch 更适合监听数据的变化并做出相应的响应。