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{}外面的變動，{}裏面的就跟變動。