一、watch

watch 是一个监听器，当一个值变化，就会触发，获取到当前值和变化前的值，他可以接受异步操作，没有缓存功能。

基础用法

watch:{
        //普通类型写法
        one(newData, oldData){
                newData 新值
                oldData 变化前的值
                ...写需要的逻辑
            }
        }
        //对象写法
        'data.one'(newData, oldData){
                newData 新值
                oldData 变化前的值
                ...写需要的逻辑
            }
        }

立即监听（会马上触发一次，但是旧值为undefined）

watch:{
        one:{
            handler:function(newData, oldData) {
            console.log(newData, oldData);
        },
        immediate:true
            },
        }

深度监听(当一个对象你需要监听其中一个值变化的时候就可以使用，可以返回更新前后的整个对象)

watch:{
        one:{
            handler:function(newData, oldData) {
            console.log(newData, oldData);
        },
        deep:true
            },
        }

二、computed

computed 当data的值发生变化，就会触发，他具有缓存功能，但是函数内不接受异步操作，一般用于一些运算或者根据多少返回什么类型的场景。

<body>
    <div id="root">

        {{ isComputed }}

        <button @click="showInfo"></button>

    </div>

</body>

<script type="text/javascript">

    Vue.config.productionTip=false
    const vm = new Vue({
        el:'#root',
        data:{
            name:22
        },

        methods:{
            showInfo(){
                this.name = 111
            }
        },

        computed:{
            isComputed(){
                return this.name * 10 + 1
            }
        }
    })

三、watch和computed的区别

watch ：没有缓存，监听的值每次发生改变都会执行，可以在函数里面执行异步操作，不需要return返回，通常用于根据值改变后调用接口的场景。
computed：具有缓存，值不发生变化不会触发，不支持异步操作，需要return返回，通常用于复杂的计算场景

Vue的watch和 computed的区别

一、watch

二、computed

三、watch和computed的区别

未完待续。。。