vue中的methods，computed，watch区别

1. computed是计算属性；watch是监听，监听data中的数据变化；methods是方法(函数)

2、computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行；methods 在重新渲染的时候，函数总会重新调用执行。所以说虽然methods和computed的到效果是一样的，但是因为computed 提供缓存，所以当要处理海量数据时，要使用computed来提高性能。

3、computed不支持异步，有异步操作时无法监听数据变化；watch支持异步操作。

4、computed第一次加载时就监听；watch默认第一次加载时不监听。

2. computed中的函数必须调用return；watch不是。

computed:{
                getMessage(){
               //调用return
                return this.Message.split('').reverse().join('')
              }
}

<template>
    <el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>

data() {
        return {
            name: '123'
        };
    },
watch: {
        name(newVal, oldVal) {//参数一为新修改的值，参数二为修改后的值
            console.log('newVal', newVal);
            console.log('oldVal', oldVal);
        },y
//当设置immediate属性为true时，无论值是否发生改变，时刻都会监听；
//当设置immediate属性为false时，常规用法，只有值发生改变才会监听。
        immediate: true
    }

6、computed是响应式的，methods并非响应式。

7、调用方式不一样，computed定义的成员像属性一样访问，视图层{{msg}}:this.属性名，methods定义的成员必须以函数形式调用:方法名()，视图层{{msg()}}。

7、使用场景：

computed：一个属性受到多个属性影响，如：购物车商品价格结算。

watch：一个数据影响多条数据，如：搜索数据。数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择。

所以：

computed和methods他们能同时实现一个功能时 ，选择前者，因为compute有缓存；

computed和watch他们能同时实现一个功能时,选择前者，因为更加简洁；