Vue2视频教程系列第十一节-计算属性

今天主要讲一下vue的computed这个计算属性的用法

computed属性是实时响应的，当项目开发中依赖某个或者某些值的变化而变化时，我们就要用到computed。下面举例来说明：

<div id="root">

     <input type="" name="" v-model="firstName">

     <input type="" name="" v-model="lastName">

     <div id="fullname">全名是：{{ firstName + lastName }} </div>

  </div>

js:

data() {

      return {

        firstName: '',

        lastName: ''

      }

    }

当我们在input里输入不同的名字时，#fullname里显示的全名显然是{{ firstName + lastName }}。这样做完全没有问题，惟一的问题是，在vue里，各部分内容要各司其值，不要越位哈。我们需要净化html里的代码，不要被太多的逻辑运算而污染，逻辑的内容要统统收纳到js里。这样我们看着舒服，也容易理解，不会杂乱无章。而我们这个全名是完全依赖firstName和lastName，如果他们中的一个或者全部变化了，全名也会随之而变化。这个前提条件符合我们对computed属性的定义。所以接下来我们应用computed来编写代码：

<div id="root">

     <input type="" name="" v-model="firstName">

     <input type="" name="" v-model="lastName">

     <div id="fullname">全名是：{{ fullName }} </div>

  </div>

js:

data() {

      return {

        firstName: '',

        lastName: ''

      }

    },

    computed: {

      fullName () {

        return this.firstName + this.lastName

      }

    }

在这里我们需要注意的一点是，computed()里的fullName与data里的数据不要重名，否则得不到结果。

有小伙伴会说，这跟写在methods里面没啥区别嘛，methods里也可以达到这样的目的啊！没错，是完全可以的。但是有点需要劳记：computed属性只有在相关依赖变化时，fullName才会重新求值，如果相关依赖没有变化时，computed只会从缓存中提取数据进行显示；而methods呢，不管firstName或者lastName变不变化，只要被触发，就会重新渲染。可见computed是可以大大提高性能的。

当我们在计算一个大型数据，而此数据又不经常变化时，无疑使用computed属性是能够大大提高性能的一种方式。

欢迎关注微信公众号：duzhan99