vue.js中计算属性(computed)和监听器(watch)的区别。

一.计算属性的用法

1.虽然两者都能起到监听的作用，但是computed主要是用来处理复杂数据的，以便于代码维护和避免代码冗余。

例：当我们要将一个字符串全部转化为大写然后拼接另一个字符串

<template>
    <div>{{changeString.toUppercase()+name}}</div>
</template>
<script>
    data(){
        return{
            changeString:'xiao',
            name:'KE AI'
        }
    }
</script>

可以看到在模板中的代码太复杂，就违背了vue.js的简介性，我们便可以使用computed对需要的值进行处理。

<template>
    <div>{{sweetName}}</div>
</template>
<script>
    data(){
        return{
            changeString:'xiao',
            name:'KE AI'
        }
    }
    computed:{
        sweetName:{
            return changeString.toUppercase+this.name
        }
    }
</script>

可以看到模板中现在用sweetName取代了原来的一大串，这就是computed的妙用。

二.侦听器watch的用法

<template>
    <button @click="addNum">{{num}}</button>
</template>
<script>
    data(){
        return{
            num:1,
        }
    }
    watch:{
        num(newNum,oldNum):{
            console.log(newNum,oldNum);
        }
    }
    methods:{
        addNum(){
            num++
        }
    }
</script>

我们可以对某个值进行监听，当侦听的值发生改变时，可以进行相应的操作。

 

重点1:当监听的值是对象中某一个属性的时候，我们不能直接使用对象为方法名，以下是对对象的监听

<template>
    <button @click="addNum">{{obj.num}}</button>
</template>
<script>
    data(){
        return{
            obj：{
　　　　　　　　　num:1　　　　　　　
            } 
        }
    }
    watch:{
        ['obj.num'](newNum,oldNum):{
            console.log(newNum,oldNum);
        }
    }
    methods:{
        addNum(){
            obj.num++
        }
    }
</script>

 重点2:侦听器监听对象，当对象中的任意值发生改变，都要监听到

<template>
    <button @click="addNum">{{obj.num}}</button>
</template>
<script>
    data(){
        return{
            obj：{
　　　　　　　　　num:1，
　　　　　　　　　cont：2，
               list:[]
　　　　　　　} 
        }
    },
    watch:{
        obj:{
            handler(newVal, oldVal) {
               console.log(newNum,oldNum);    输出的为obj改变后和改变前的值
            },
            immediate:false,  //是否在obj创建后立即执行
            deep:true     //deep意为深度检测
        }
    },

    methods:{
        addNum(){
            obj.num++
        }
    }
</script>