Vue 的计算属性与方法和侦听器的差异

用三种方法： 计算属性、 方法、侦听器， 实现 fullName 的全部展示，以及修改对应的名字和年龄的时候， 对应的缓存机制。

原图.png

1： 计算属性： （内置缓存机制）
当更改age的时候， fullName 函数不执行；
当更改fristName的时候， fullName 函数才执行

    {{fullName}} 
    {{age}}

计算属性.png

2、方法： （无内置缓存）
当更改age的时候， fullName 函数执行， 这样就增加了代码冗余，浏览器运行性能降低；
当更改fristName的时候， fullName 函数仍执行。

    {{fullName()}}
    {{age}}

方法.png

3、侦听器： （有内置缓存）
跟“计算属性”相似， 但是代码相较于“计算属性”而言， 比较繁琐且冗余。

  

    {{fullName}}
    {{age}}

侦听器.png