[Day 22] 计算属性computed趴搭搭

嗨各位!!!又是我,那个小可爱又来了,今天要来讲的是—计算属性,如果你的模板需要加入很多逻辑运算,可能就会让你的版面变得杂乱无章,这时候只要用上computed,就可以让整个画面变得比较乾净!!

小例子

来举个很常见的例子,字串的反转,如果用一般的写法,像下面这样,就会显得有点乱。
这个例子是将原本的内容拆解,再来倒转,最後组合,输出最後的答案。
https://ithelp.ithome.com.tw/upload/images/20211004/20139392oLjBonpzUy.png
结果长这样
https://ithelp.ithome.com.tw/upload/images/20211004/20139392eAfUpIk7tD.png
OMG真的好乱(っ °Д °;)っ

改良後

再来看看用上computed的写法,看上去就会比较整洁,也比较有条理。
https://ithelp.ithome.com.tw/upload/images/20211004/20139392NM7V59koEc.png
输出的结果是一样的,但是这个版本的逻辑性比较好,看着也比较不会混乱。
https://ithelp.ithome.com.tw/upload/images/20211004/20139392934F6ySnst.png

比较method和computed

其实上面的例子也是可以用method写,就像前面天数的例子一样(大家可能忘记了=]),那为什麽要特别用computed呢??
因为computed缓存机制,以上面的例子来举例,当第一次输出{{reversemsg}}时,Vue就已经将结果保存到缓存中了,第二次呼叫{{reversemsg}}会直接输出结果,而method却不会这样,呼叫两次就重头跑两次。
简单来说如果注重效能的话就可以用computed~!!

结语

今天是否学到了新知识呢!各位掰掰,明天再见小可爱☜(゚ヮ゚☜),未来的我也会继续为各位带来知识~


<<:  21. 闲聊 x 网页浏览快捷键(Windows/Linux)

>>:  Day21 Android - Retrofit(Post)

Day 8 - Laravel Request validation

Introduce 由於我们想防范使用我们API的使用者传入恶意的参数或传入我们预期中型态的参数,我...

D16 - 「脉冲×宽度×调变」

这个章节要开始建立「PWM 输出视窗」。 何谓 PWM 名为「脉冲宽度调变」(Pulse-width...

微聊 铁人赛 最终回

今天居然就是铁人赛的最後一天了,没想到!!没想到啊!!!! 今天就来聊最後一回,这 30 天微人都经...

Vue.js指令介绍&基本指令(Directives)(DAY26)

What is Vue Directives? 指令的功能通常用在JavaScript表达式的值改变...