总结如下

基础用法： 

1.计算属性的getter函数 

2.计算属性的setter函数 

3.计算属性的cache缓存属性 

 常见问题：

 1.计算属性getter不执行的场景 

 2.在v-for中使用计算属性，起到类似"过滤器的作用" 

 3.watch与computed的set函数的比较

computed 计算属性

computed: {
 example: {
   get () {
     return 'example'
   },
   set (newValue) {
     console.log(newValue)
   }
 }

基础用法

1.计算属性的getter函数

<template>
  <div>
    <h4>测试</h4>
    <div>
      <input type="text" v-model="message" />
      <div>{{changeMessage}}</div>
    </div>
  </div>
</template>

   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
       changeMessage: {
        // 计算属性：依赖message变化而变化  依赖没变化就不会重新渲染；
        get () {
           return this.message + 'world'
        },
        set () {
        }
      }
     }
  }

2.计算属性的setter函数

<template>
  <div>
    <h4>测试</h4>
    <div>
      {{didi}}
      {{family}}
    </div>
    <div>
      {{didiFamily}}
    </div>
  </div>

</template>

   export default {
    data () {
       return {
        didi: 'didi',
        family: 'family'
       }
     },
    computed: {
      didiFamily:{
        //getter
        get:function(){
          return this.didi + ' ' + this.family
        },
        //setter
        set:function(newValue){
          // 这里由于该计算属性被赋值，将被调用
          console.log(newValue)
          this.didi = 123
          this.family = 456
        }
      }
    },
    mounted () {
      // 赋值，调用setter函数
      this.didiFamily = 'John Doe'
    }
  }

3.计算属性的缓存

<template>
  <div>
    <h4>测试</h4>
    <div>
      <input type="text" v-model="message" />
      <div>{{now}}</div>
    </div>
  </div>

</template>

   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
      now:{
        cache: false,
        get:function(){
          return Date.now() + this.message
        }
      }
    },
    mounted () {
      setInterval(() => {
        // 当缓存开关为false的时候，定时器每次打印的时间都是不一样的
        console.log(this.now)
      }, 500)
    }
  }

常见问题

1.计算属性getter不执行的场景

<template>
  <div>
    <h4>测试</h4>
    <div>
      <button @click="toggleShow">Toggle Show Total Price</button>
      <p v-if="showTotal">Total Price = {{totalPrice}}</p>
    </div>
  </div>

</template>

   export default {
    data () {
       return {
        showTotal: true,
        basePrice: 100
       }
     },
    computed: {
      totalPrice () {
        return this.basePrice + 1
      }
    },
    methods: {
      toggleShow () {
        this.showTotal = !this.showTotal
      }
    }
  }

2.在v-for中使用计算属性，起到类似”过滤器的作用”

<template>
  <div>
    <h4>测试</h4>
    <div>
      <ul>
          <li v-for="n in evenNumbers">{{n}}</li>
      </ul>
    </div>
  </div>

</template>

   export default {
    data () {
       return {
        numbers: [ 1, 2, 3, 4, 5 ]
       }
     },
    computed: {
      evenNumbers () {
        return this.numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }
  }

链接: https://fly63.com/article/detial/10881