Vue学习笔记[03]-计算属性和方法

什么是vue的方法

vue的方法和之前的el,data一样,是vue实例的options参数,可以随vue的实例构造传入.下面是两个例子介绍了methods的基本用法:

  

    click  me {{counter}} times!

  

在上一个例子中,我们没有使用methodsoptions,因为我们的事件处理足够简单,基于vue的响应式,我们可以动态的改变button标签中的counter变量的值.可是一旦事件处理的函数十分冗长,我们就不适合在html标签中写入方法.还好methods可以拯救我们:

  

    click  me {{counter}} times!

  

这里的methods中封装了让counter增加的方法,效果和之前的一样.

有时,我们需要对html中呈现的内容做一些处理,例如把姓和名连接在一起,我们可以这样做

  

   
name:{{firstname}} {{lastname}}
 
  

`

也可以借助方法来实现

  

   
name:{{firstname}} {{lastname}}
 
  

`

另一种方法使用 计算属性(computed) 来实现.

计算属性

计算属性也是一种vue的options,其中一般定义一些需要格式化或者处理的属性.

  

    
name:{{firstname}} {{lastname}}
    
Name:{{getFullName()}}
    
Name:{{fullName}}
  

那么,methods和computed有什么区别呢?

首先,computed中更加偏向于同firstname和lastname一样作为属性存在,在使用时也不需要加()在阅读时更加统一.

其次,计算属性是有一定缓存的,这意味着在使用计算属性时,若属性的值未发生变化,只需调用一次计算属性的方法.而在methods中定义的方法没有缓存,无论值是否改变,都需要多次调用.来看下面的例子:

  

    
Name:{{getFullName()}}
    
Name:{{getFullName()}}
    
Name:{{getFullName()}}
    
Name:{{getFullName()}}
    
Name:{{getFullName()}}

  

image

  

      
Name:{{fullName}}
      
Name:{{fullName}}
      
Name:{{fullName}}
      
Name:{{fullName}}
      
Name:{{fullName}}
  

image

因为计算属性的值未发生变化,所以计算属性的方法只被调用了一次.通过在控制台输入vm.firstname = 'OtherName'后可发现计算属性的方法又被调用了.同时HTML中显示的内容仍然被响应式的修改.