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官方文档