Vue中关于computed和watch的区别

computed：

1.computed支持缓存（只有引用的响应式属性改变时才会重新计算）

2.不支持异步操作

3.computed中的属性有一个get和set方法，如果属性为函数时，默认调用get方法。

 

new Vue({
        el:"#app",
        template:`<div>
            <input type="text" v-model="firstName">+
            <input type="text" v-model="lastName">=
            <input type="text" v-model="fullName">
            </div>`,
        data(){
            return{
                firstName:'shuaige',
                lastName:'bie'
            }
        },
        computed: {
            fullName(){
                return this.firstName + ' ' + this.lastName
            }
        }

 当属性为对象时，可以使用其set方法

new Vue({
        el:"#app",
        template:`<div>
            <input type="text" v-model="firstName">+
            <input type="text" v-model="lastName">=
            <input type="text" v-model="fullName">
            </div>`,
        data(){
            return{
                firstName:'shuaige',
                lastName:'bie'
            }
        },
        computed: {
            fullName:{
                get(){
                return this.firstName + ' ' + this.lastName
            },
                set(newVal){
                    this.firstName = newVal.split(" ")[0]
                    this.lastName = newVal.split(" ")[1]  
                }
            }
        }
//当直接更改fullName时，会触发set方法，firstName和lastName的值也会被修改

 

watch：

1.watch不支持缓存，会直接监听数据，当数据改变时，会直接触发对于的操作

2.watch支持异步操作

3.watch可以接收参数（oldValue，newValue）

4.watch中的属性必须时data中声明或者其他组件传递过来的数据

  
    new Vue({
        el:"#app",
        template:`<div>
            <input type="text" v-model="firstName">+
            <input type="text" v-model="lastName">=
            <input type="text" v-model="fullName">
            </div>`,
        data(){
            return{
                firstName:'shuaige',
                lastName:'bie',
                fullName:'shuaige bie'
            }
        },
      
        watch:{
           firstName(val){
               console.log('第一次没有触发')
               this.fullName = val +" " + this.lastName
           }
           }

 5.watch中的属性为对象时，可以使用其handler方法、immediate属性（当为true时，页面刷新时就会调用handler方法）和deep属性（当为true时，能够监听复杂属性类型）

 new Vue({
        el:"#app",
        template:`<div>
            <input type="text" v-model="firstName">+
            <input type="text" v-model="lastName">=
            <input type="text" v-model="fullName">
            </div>`,
        data(){
            return{
                firstName:'shuaige',
                lastName:'bie',
                fullName:'shuaige bie'
            }
        },
      
        watch:{
           firstName:{
               handler(val){
                console.log('第一次有触发')
                this.fullName = val +" " + this.lastName
               },
               immediate:true，
　　　　　　　　　//deep:true

               
           }
           }

 

总结:

在应用中，computed主要用于同步数据，当一个数据受到多个数据的影响时，应该使用computed；而当一个值变换时需要实现其他数据的更改或者异步操作时，应该使用watch，例外，能够使用computed应该尽量使用computed，这样性能才不会被过度的占用