vue中methods computed watch的区别

methods 普通方法:

当页面发生变化时,它就会触发一次,没有缓存,它会重复计算

<div id="box">
        {{haha()}}
    </div>
    <script>
        var vm = new Vue({
            el:'#box',
            data:{
                mess:'abcd',
                age:18
            },
            methods:{
                haha:function(){
                    console.log('我是普通方法')
                    return this.mess.split("").reverse().join('')
                }
            }
        })
    </script>

computed 计算属性:

当他所依赖的属性发生变化时,计算属性会重新计算,有缓存,他会直接从缓存中拿结果

<div id="box">
        <button v-on:click='flag = !flag'>切换</button>
        <p v-if='flag'>pppp</p>
        {{xxoo}}
    </div>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                flag: true,
                abc: true
            },
            computed: {
                //所依赖的属性发生变化时会自动触发
                xxoo() {
                    this.flag
                    return '我是计算属性'

                }
            }
        })
    </script>

watch 监听:

当他所监听的属性发生变化时,会自动调用对应的监听方法,它的名字必须和所监听属性的名字一致, 多用于异步处理,开销比较大的运算

<div id="box">
        <button v-on:click='flag = !flag'>切换</button>
        <p v-if='flag'>pppp</p>
        {{xxoo}}
    </div>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                flag: true,
                abc: true
            },
            watch: {
                flag(a) {
                    console.log(a + "我是flag监听")
                }
            }
        })
    </script>

总结:

methods:在重新渲染的时候，函数总会重新调用执行。
computed:当他所依赖的属性发生变化是会重新调用,擅长处理一个数据影响多个数据
watch:当它所监听的属性发生变化是会执行它对应的方法,擅长处理一个数据受多个数据影响