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 
　　　　}, 
　　} 
}