Vue的计算属性、方法和侦听器介绍：
本案例主要：定义firstName,lastName。然后把firstName和lastName组合fullName来输出
首先介绍之前提及到的引用方法：插值表达式
//而这种方法，会使得数据出现冗余的现象。 fullName和firstName,lastName的引用出现重复了
所以，现在介绍几种新的方法：
一：计算属性(computed)
//该方法：首先，定义了两个数据（firstName,lastName），再引入计算属性(computed) 的fullName方法来引用前面的两个数据，实现最优效果。
而计算属性有个特性：即=》内置缓存的概念，下面就来介绍一下：请看图
//这里引入了新的数据age，和fullName方法中的输出( console.log() )。
//以下图片在控制台中查看：
①：
②：
③：
//综上：控制台图①是页面原本的显示；在修改了age的属性之后，age的值发生改变（如控制台图②），而fullName的值却没有发生变化；在修改了lastName属性后，fullName的值发生改变，age不变（如控制台图③），并输出'计算了一次’。可以看出，computed计算属性的内置缓存的作用体现出来了，只有fullName的值发生改变，才会重新更新，而其他时候不关于fullName的值改变后，它会驻留在缓存中，不用去更新。性能更高！！！
===================================================================
二：方法(methods)
//以上，运用methods方法来重写案例，需要注意的是第12行代码的fullName的引用，需要加上‘（）’。而且同样可以正常输出结果。
而methods方法却没有计算属性的内置缓存特性，如下：
//这里引入了新的数据age，和fullName方法中的输出( console.log() )。
//以下图片在控制台中查看：
①：
②：
③：
//综上：控制台图①是页面原本的显示；在修改了age的属性之后，age的值发生改变（如控制台图②），而fullName的值却没有发生变化，但会输出‘计算一次’；在修改了lastName属性后，fullName的值发生改变，age不变（如控制台图③），并输出'计算了一次’。可以看出，methods方法没有computed计算属性的内置缓存的作用，不论是age值还是fullName值的改变，都会重新更新数据。
===================================================================
三：侦听器(watch)
//这里引入了新的数据age，和fullName方法中的输出( console.log() )。
//以下图片在控制台中查看：
①：
②：
//综上，控制台图①是页面原本的显示；在修改了age的属性之后，age的值发生改变，修改了lastName属性后，fullName的值发生改变，age不变（如控制台图②），并输出'计算了一次’。可以看出，侦听器（watch）和计算属性（computed）都具有内置缓存的作用并体现出来了，只有fullName的值发生改变，才会重新更新，而其他时候不关于fullName的值改变后，它会驻留在缓存中，不用去更新。但侦听器（watch）的麻烦之处在于：侦听的是firstName和lastName两个属性的变化，要编写的代码量相对大，而且还要在data中声明fullName属性的值，用于存放fullName的原始数据。
===================================================================
得出结论：
computed和watch都具备缓存的机制，而methods不具备；相对的，computed和watch会比methods好，而computed和watch相比，computed的编写代码会少很多。
若一个案例中都可以运用上面的三种写法，推荐用computed来编写代码，它的使用效率高，代码编写量少，编写性能更高！