Vue学习笔记之计算属性和侦听器

0x00 计算属性

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

<div>
    {{ message.split('').reverse().join('') }}
</div>

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。

所以,对于任何复杂逻辑,你都应当使用计算属性。

<div id = 'com'>
        <h3>{{msg}}</h3>
        <p>{{currentMsg}}</p>
        <button @click='clickHandler'>更改</button>
</div>
    var com = new Vue({
            el:'#com',
            data:{
                msg:'学习computed'
            },
            methods:{
                clickHandler(){

                    this.msg = '我更改了数据'

                }

            },
            computed:{
                currentMsg(){
                    // computed方法中默认只有getter

                    return this.msg
                 }


                
            }

        })

当我点击按钮的时候更改了当前的数据,同时h3和p标签中数据也随时改变。

为什么会这样呢?

因为Vue知道com.currentMsg依赖与com.msg,因此当com.msg发生改变时,所有依赖com.currentMsg的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系。:计算属性的getter函数是没有副作用的,这使它更易于测试和理解。

同样的上面操作,我们不用computed声明的计算属性方法,而仅仅通过methods中声明的方法也能完成上面的效果,那么为什么又要使用computed方法呢?

因为计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要msg还没有发生变化,多次访问currentMsg计算属性会立刻返回之前计算的结果,而不比再次执行函数。同样的。每当触发重新渲染时,调用方法将总会执行函数。

我们为什么需要缓存?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

计算属性的getter

计算属性默认只有getter,不过在需要时你也可以提供一个setter。

  var com = new Vue({
            el:'#com',
            data:{
                msg:'学习computed'
            },
            methods:{
                clickHandler(){

                    this.currentMsg = '我更改了数据'

                }

            },
            computed:{
                currentMsg:{
                   set : function(newValue){
                      this.msg = newValue;
                   },
                   get : function(){
                     return this.msg;
                   }
                 }


                
            }

        })                            

当点击按钮的时候,会触发computed中的setter方法,从而将newValue的值,赋值给msg。因为计算属性方法的getter方法因为跟msg有依赖关系,从而会相应的发生改变。

ok,估计到目前为止,大家可能还不知道计算属性的setter方法的应用在何种场景,下章咱们讲完v-model指令之后给大家补个案例一下子就明白了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏华章科技

10道Hadoop面试真题及解题思路

首先是这一天,并且是访问百度的日志中的IP取出来,逐个写入到一个大文件中。注意到IP是32位的,最多有个2^32个IP。同样可以采用映射的方法, 比如模1000...

8220
来自专栏数据结构与算法

codechef Table Game(博弈)

maya这题我前前后后 断断续续的做了一个星期才A掉。CC一场challenge出两道打表题可有点过分了啊。。

8210
来自专栏前端开发

你不知道的console.log

对于前端开发者,使用console.log() 次数绝对很多,但是大部分人认识的 console 对象还不是很全面,其实深入了解这些后,你会发现给开发过程带来很...

56740
来自专栏用户2442861的专栏

STL map, hash_map , unordered_map区别、对比

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/d...

53950
来自专栏漏斗社区

HASH函数烧脑大作战

本期讲解一下hash函数,由于之前在比赛中做到了一题hash有关的题目,引发了此次的深(烧)度(脑)研究,本来想讲讲原理,但是太难,看得很痛苦,所以此次通过结合...

13850
来自专栏腾讯技术工程官方号的专栏

后台开发中的时空转换艺术

作者介绍:augustzhang,安全平台部基础架构组员工,先后从事密保、验证码等后台研发工作,现在主要负责安全平台部大数据平台的研发工作,致力于研究每秒GB级...

22070
来自专栏生信技能树

R for Data Science(十二)

一直觉得编程能力好的人都会写函数,我对R语言写函数能力比较差,就学了这一章节,拆分如何写函数以及为什么写函数 例如我们看一下这个代码

14020
来自专栏计算机视觉与深度学习基础

本次新生赛部分题解

A poj1129 这题的愿意是考察四色原理(不是太难,主要是了解),但是模拟+暴力枚举也是可以过的,有几个WA点,注意看注释 #include<cstdio>...

21850
来自专栏数据结构与算法

洛谷P3857 [TJOI2008]彩灯(线性基)

Peter女朋友的生日快到了,他亲自设计了一组彩灯,想给女朋友一个惊喜。已知一组彩灯是由一排N个独立的灯泡构成的,并且有M个开关控制它们。从数学的角度看,这一排...

6020
来自专栏JMCui

策略模式.

    网上介绍设计模式的文章有很多,好文也不少。作为设计模式的初学者,实在不敢多加造次。就仅以此文作为我记忆的备忘录吧!

11730

扫码关注云+社区

领取腾讯云代金券