computed（計算屬性）和watch（監聽屬性）的區別

computed:

　　1. computed 具有緩存功能，可以監聽對象某個具體屬性。

　　2.變量不在 data中定義，而是定義在computed中。

　　3.根據一個現有數據去生成一個新數據，並且這兩個數據會永久的建立關系，還會建立緩存，當無關數據改變的時候，不會重新計算而是直接使用緩存中的值。

　　而methods中每調用一次就會重新計算一次，為了進行不必要的資源消耗，選擇用計算屬性.
　4. 初始化的時候就可以被監聽到並且計算

<template>
  <div>
    <h2>{{isMan}}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        baseInfo: {
          area: '面積',
          streetTown: '地區'
        }
      }
    }
  },
　　//根據一個現有數據去生成一個新數據，並且這兩個數據會永久的建立關系，還會建立緩存，當無關數據改變的時候，不會重新計算而是直接使用緩存中的值。
　　而methods中每調用一次就會重新計算一次，為了進行不必要的資源消耗，選擇用計算屬性

  computed: {
    isMan () {
      return this.form.baseInfo.area && this.form .baseInfo.streetTown
    }
  }
}
</script>

<style>

</style>

　　

 

watch:

　　1.watch 監聽的是已經在 data 中定義的變量, 當該變量變化時，會觸發 watch 中的方法

　　2.watcher，當需要在數據變化時執行異步或開銷較大的操作時，這時watch是非常有用的

　　3.watch可以進行深度監聽，監聽對象的變化。

　　4.只能監聽簡單數據類型，如果監聽復雜數據類型，如對象，無法監聽對象具體某個屬性。

　　

//Vue提供了一個watch方法可以讓使用者去監聽某些data內的數據變動，觸發相應的方法，比如

data() {
       return {
                queryData: { 
　　　　　　　　　　　　 name: '',
　　　　　　　　　　　　 creator: '',
　　　　　　　　　　　　 selectedStatus: '', 
　　　　　　　　　　　　time: [], },         
　　　　}        
}
// 現在我需要監聽這個queryData，我可以這樣做：
watch: {
　　　　 queryData: { 
　　　　　　　　handler: function() { 
　　　　　　　　　　//do something 
　　　　　　　　},
　　　　　　　 deep: true 
　　　　　} 
}

　　

// 里面的deep設為了true，這樣的話，如果修改了這個queryData中的任何一個屬性，都會執行handler這個方法。不過其實這樣開銷是蠻大的，尤其是對象里面結構嵌套過深的時候。
而且有時候我們就想關心這個對象中的某個屬性，比如name，這個時候可以這樣
watch: { 
　　'queryData.name': { 
　　　　handler: function() { 
　　　　　　//do something 
　　　　}, 
　　　　deep: true 
　　} 
}

　　

// 或者還可以這樣巧用計算屬性
computed: { 
　　getName: function() { 
　　　　return this.queryData.name
　　 } 
} 
watch: { 
　　getName: { 
　　　　handler: function() { 
　　　　　　//do something 
　　　　}, 
　　} 
}