Vue系列之computed使用详解(附demo,不定期更新)

前言：工作中用Vue技术开发项目有一段时间了，独立开发完成项目基本没什么问题。可是就是在在开发过程中遇到问题常常是通过零散的搜索或者官方文档来解决，这样的现象就说明自己对Vue根本没有一套自己理解后的系统知识的框架。为了建立这套完整的Vue知识框架，开始了《我眼中的Vue》系列文章的写作，本系列是基于Vue官方文档，其他资料教材，加上实践经验总结后形成的一套个人资料。文中的观点仅供参考，如果能对你有些许帮助或者启发，笔者则甚是欣慰。点此进入githubDemo地址

文章目录

基础用法：

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>

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

2.计算属性的setter函数

当赋值给计算属性的时候，将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候。

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

</template>

<script>
   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'
    }
  }
</script>

3.计算属性的缓存

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

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

</template>

<script>
   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)
    }
  }
</script>

常见问题

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>

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

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

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

</template>

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

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

vuex 接收 的computed ，用set监测不到变化，必须要用watch才可以生效；（原理：实质没有改变computd的值，只是改变了get的return值 => 组件外的访问）

v-model 改变的computed，用watch监测不到变化，必须要用computed对象中的set函数方法才能监测得到（原理：相当于每次改变了computed自身的值 => 组件内的访问）

总结

that's all, 以上就是我目前所有的关于Vue系列的computed的理解。觉得对你开发有帮助的可以点赞收藏一波，如果我哪里写错了，希望能指点出来。如果你有更好的想法或者建议，可以提出来在下方评论区与我交流。大家一起进步，共同成长。感谢[鞠躬]。

参考资料

• 我的gitHubDemo
• Vue权威指南教程
• Vue官方文档

更多专业前端知识，请上 【猿2048】www.mk2048.com