vue-计算属性和侦听属性

一、计算属性computed

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。对比普通函数方式，每次访问都需要执行一遍函数。

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。

例子

<script>
// @ is an alias to /src
export default {
  data () {
    return {
      title: '标题',
    }
  },
  computed: {
  // 第一钟写法
    ctitle () {
      return this.title
    },
    // 第二种写法
    ctitle2: function () {
      return this.title
    },
    // 第三种写法
    ctitle3: {
      // 默认只有getter
      get: function () {
        return this.title
      },
    }
  }
}
</script>

二、侦听属性watch

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

例子

watch: {
    // 监听一个对象属性变化
    obj: {
      handler (newVal, oldVal) {
        console.log('监听对象的属性变化：', newVal)
      },
      deep: true
    },
    // 监听对象中name属性变化
    'obj.name': {
      handler (newVal, oldVal) {
        console.log('监听对象中name属性：', newVal)
      }
    },
    // 监听基数数据类型第一种写法
    info (newVal, oldval) {
      console.log(oldval, newVal)
    },
    // 监听基数数据类型第二种写法
    title: {
      handler (newVal, oldVal) {
        this.obj.name = newVal
      }
    }
  }

三、实现vue中监听某一个属性值的变化

1. 监听data中某一个对象中属性变化

<template>
    <div class="home">
        <p>侦听属性：obj.name={{obj.name}}</p>
        <p>计算属性检测：obj.name={{comName}}</p>
        <input type="text" style="width:100%;height:30px;border:1px solid" v-model="title">
    </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home',
  data () {
    return {
      title: '',
      obj: { name: '对象标题' }
    }
  },
  computed: {
    comName () {
      return this.obj.name
    }
  },
  watch: {
  // 第一种写法
    obj: {
      handler (newVal, oldVal) {
        console.log('监听对象的属性变化：', newVal)
      },
      deep: true
    },
    // 第二种写法
    'obj.name': {
      handler (newVal, oldVal) {
        console.log('监听对象中name属性：', newVal)
      }
    },
    title: {
      handler (newVal, oldVal) {
        this.obj.name = newVal
      }
    }
  }
}
</script>

     2.监听data中基本数据类型属性变化

<template>
    <div class="home">
        <p>{{ctitle}}</p>
        <input type="text" style="width:100%;height:30px;border:1px solid" v-model="title">
    </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home',
  data () {
    return {
      title: '标题'
    }
  },
  computed: {
    ctitle () {
      return this.title
    }
  },
  watch: {
    title: {
      handler (newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }
  }
}
</script>