Vue computed和watch区别

先贴代码： 自己可以试试

<template>
    <div style="margin: 50px">
      <span>xiaoming:{{xiaoming}}</span><br>
      <span>zhangsan:{{zhangsan}}</span><br>
      <span>lisi:{{lisi}}</span><br>
      <span>myAddress:{{myAddress}}</span><br>
      <input v-model="classc"><br>
      <input v-model="grade"><br>
      <input v-model="city"><br>
      <input v-model="county"><br>
      <input v-model="treet"><br>
    </div>
</template>
<script>
    export default {
        data: function () {
            return{
                grade: '6',//年纪
                classc: '3',//班级
                xiaoming: '',
                zhangsan:'',
                lisi:'',
                city: '北京',//地市
                county: '朝阳区',//区县
                treet: '解放大道'//街道
            }
        },
        computed: {
            myAddress: function() {//我的地址
                return this.city + this.county + this.treet;
            }
        },
        watch:{
            grade: function(){
                this.xiaoming = this.grade + '年级' + this.classc + '班的小明';
                this.zhangsan = this.grade + '年级' + this.classc + '班的张三';
                this.lisi = this.grade + '年级' + this.classc + '班的李四';
            },
            classc: function(){
                this.xiaoming = this.grade + '年级' + this.classc + '班的小明';
                this.zhangsan = this.grade + '年级' + this.classc + '班的张三';
                this.lisi = this.grade + '年级' + this.classc + '班的李四';
            }
        }
    }
</script>

 

个人理解： 

computed：当街道、区县、地市任意一项值改变时，我的地址就会跟着变化
watch：当班级或年纪改变时，小明张三李四的个人信息都会跟着变动。
通俗讲：compute{}里面任意一项变动，{}外面的就跟着变化。watch{}外面的变动，{}里面的就跟变动。