3-3 计算属性、方法和侦听器

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来编写代码,它的使用效率高,代码编写量少,编写性能更高!

人已赞赏
随笔日记

spring源码 — 四、MVC

2020-11-9 3:51:54

随笔日记

String、StringBuffer、StringBuilder的比较

2020-11-9 3:51:56

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索