Vue computed使用总结

更新日期: 2021-11-30 阅读: 1.6k 标签: 属性分享

总结如下

基础用法：

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函数

当其依赖的属性的值发生变化的时，这个计算属性的值也会自动更新。多用于"data，computed"的属性。

<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函数

当赋值给计算属性的时候，将调用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.计算属性的缓存

vue实例中被观察的数据属性发生了改变时才会重新执行getter,但是我们有时候计算属性依赖实时的非观察数据属性，比如下面例子中的Data.now

<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不执行的场景

当包含计算属性的节点被移除并且模板中其他地方没有再引用该属性的时候，那么对应的计算属性的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