Vue-Vue中计算属性computed和监视属性watch的区别

※computed计算属性函数中不能添加异步回调函数，而watch中可以

我们在日常开发中，很多案例既可以用watch实现，也可以用computed实现,z在两者皆可的情况下，我们优先选择更加方便的computed计算属性来实现，但是如果存在computed行不通的案例怎么办？我们来看一下以下案例

我们通过输入姓和名，要求输出全名

我们用计算属性来写这个案例：

<div id="app">
        姓:<input type="text" v-model="firstName"><br><br>
        名:<input type="text" v-model="lastName"><br><br>
        全名:{{fullName}} <br>
    div>

 const vm = new Vue({
        el:'#app',
        data:{
            firstName:'',
            lastName:'',
            
        },
        computed:{
            fullName:{
                get(){
                    console.log('get被调用了');
                    return this.firstName+'-'+this.lastName
                }  
            }
        }
    })

可以实现

我们再用监视属性watch来写这个案例

 <div id="app">
       姓:<input type="text" v-model="firstName"><br><br>
       名:<input type="text" v-model="lastName"><br><br>
       全名:{{fullName}} <br>
    div>

const vm = new Vue({
        el:'#app',
        data:{
            firstName:'',
            lastName:'',
            fullName:''
        },
        watch:{
                firstName(val){
                    this.fullName = val +'-'+this.lastName
                },
                lastName(val){
                    this.fullName = this.fullName +'-'+val
                }
               
            }
    })

我们分别监听firstName和lastName的值，每当它们的值发生改变，我们就给fullName重新赋值，查看效果

和之前的效果是一样的

那么我们再修改需求，假设我们再修改姓名后，需要全名延迟一秒钟再输出，那我们该怎么写呢?

我们先用watch试试

 const vm = new Vue({
        el:'#app',
        data:{
            firstName:'',
            lastName:'',
            fullName:''
        },
        watch:{
                firstName(val){
                    setTimeout(()=>{
                        this.fullName = val +'-'+this.lastName
                    },1000)
                    
                },
                lastName(val){
                    setTimeout(()=>{
                        this.fullName = this.fullName +'-'+val
                    },1000)
                }
               
            }
    })

我们在监听函数中设置setTimeout方法(注意这是window方法，我们需要使用箭头函数来是他的作用域指向window)，我们看结果

每次全名显示时，都会有1s的延迟

我们再用computed来写

const vm = new Vue({
        el:'#app',
        data:{
            firstName:'',
            lastName:'',
            
        },
        methods:{
            showFullName(){
                return this.firstName+'-'+this.lastName
            }
        },
        computed:{
            fullName:{
                get(){
                    setTimeout(()=>{
                      console.log('get被调用了');  
                      return this.firstName+'-'+this.lastName  
                    },1000)
                }
               
            }
        }
    })

效果

我们可以看到，页面没有任何反应

这是为什么？

我们看这段代码

get(){
                    setTimeout(()=>{
                      console.log('get被调用了');  
                      return this.firstName+'-'+this.lastName  
                    },1000)
                }

我们在get函数里写了setTimeout函数，setTimeout函数中的值会返回给get函数，而get函数并没有返回值，这样就会造成计算属性没有返回值，从而达不到我们想要的效果

为什么watch中可以写setTimeout函数?

因为我们在watch中是通过直接修改fullName来改变fullName的值，不需要像computed一样通过将几个属性进行计算再返回

仔细对比两者的差异

 watch:{
                firstName(val){
                    setTimeout(()=>{
                        this.fullName = val +'-'+this.lastName
                    },1000)
                    
                },
                lastName(val){
                    setTimeout(()=>{
                        this.fullName = this.firstName +'-'+val
                    },1000)
                }
               
            }

computed:{
            fullName:{
                get(){
                    setTimeout(()=>{
                      console.log('get被调用了');  
                      return this.firstName+'-'+this.lastName  
                    },1000)
                }
               
            }
        }

一个是直接修改，一个是返回

所以我们的出结论：computed计算属性函数中不能添加异步回调函数，而watch中可以