Vue入门详解之计算属性,方法和侦听器

对于存在一个姓氏和名字,我们通过Vue计算出姓名有三种方式,计算属性,方法(methods)和侦探器三种方式!

那么这三者有何差异,性能又如何呢?我们来对比一下!

首先我们使用前期较为熟悉的methods来实现

methods实现

前台我们使用插值表达式来调取这个methods方法:

<div id="app">{{full()}},年龄:{{age}}</div>
js代码
var app=new Vue({
    el:"#app",
    data:{
        firstName:"Jack",
        lastName:"Ma",
        age:"18"
    },
    methods:{
        full:function(){
            console.log("触发一次,来自methods")
            return this.firstName+"   "+this.lastName;
        }
    }
})

前台是够完整的进行输出这个姓名的,如果我文通过app对象修改model(数据层),无论修改关联的数据还是无关的age,都会触发这个methods方法!这个不存在缓存机制,每次修改就会调取这个方法!性能上不是很可以!

计算属性实现

    我们可以定义一个computed,来调取这个进行计算

<div id="app">{{fullc}},年龄:{{age}}</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            firstName:"Jack",
            lastName:"Ma",
            fullName:"Jack Ma",
            age:"18"
        }
        computed:{
            fullc:function(){
                console.log("触发一次,来自计算属性")
                return this.firstName+ " " +this.lastName;
            }
        }
    })
</script>

我们无论修改lastName,还是firstName都会触发这个计算属性,但是我们进行修改无关变量age的时候,我们则不会重新调取这个计算属性!发现这个computed是有缓存机制的!

侦探器watch实现

   除了上述的两种方式外,还有一种侦探器方式,需要定义在watch对象中,下面我们使用watch实现一下

<div id="app">{{fullName}},年龄:{{age}}</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            firstName:"Jack",
            lastName:"Ma",
            fullName:"Jack Ma",
            age:"18"
        }
        watch:{
            firstName:function(val){
                console.log("触发一次,来自侦探器")
                this.fullName=val + " "+this.lastName;
            },
            lastName:function(val){
                console.log("触发一次,来自侦探器")
                this.fullName=this.firstName+" "+val;
            }
        }
    })
</script>

通过上述方式我们测试得出这个侦探器实现,测试得出这个也是存在缓存机制的.

小结

        那么对比一下,我们很容易得出computed(计算属性)和watch(侦探器)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?上述很容易得出侦探器比computed复杂的多!因此在一个项目同时可以使用计算属性,methods和侦探器实现时候我们优先使用计算属性其次是侦探器,最后选择methods!

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go 语言简介(上)— 语法

Hello World package main //声明本文件的package名 import "fmt" //import语言的fmt库——用于输出 f...

4048
来自专栏HansBug's Lab

2243: [SDOI2011]染色

2243: [SDOI2011]染色 Time Limit: 20 Sec  Memory Limit: 512 MB Submit: 3113  Solved...

3099
来自专栏Golang语言社区

JS基础(下)

事件DOM Event 更多事件请查询h3c htmldom参考手册 event onclick() :当点击时 onfocus() :获得焦点时 ;当...

4747
来自专栏阮一峰的网络日志

async 函数的含义和用法

本文是《深入掌握 ECMAScript 6 异步编程》系列文章的最后一篇。 Generator函数的含义与用法 Thunk函数的含义与用法 co函数库的含义...

2826
来自专栏Golang语言社区

golang错题集

为什么呢?是不是有点诧异? 输出的都是“annei”,而“annei”又是“names”的最后一个元素,那么也就是说程序打印出了最后一个元素的值,而name对于...

1610
来自专栏Nian糕的私人厨房

JavaScript 基础

JavaScript 是一种轻量级,解释型的,有着函数优先 (First-class Function) 的编程语言,虽然它是作为开发 WEB 页面的脚本语言而...

1245
来自专栏程序猿DD

第七章 正则表达式编程

第七章 正则表达式编程 什么叫知识,能指导我们实践的东西才叫知识。 学习一样东西,如果不能使用,最多只能算作纸上谈兵。正则表达式的学习,也不例外。 掌握了正则表...

1996
来自专栏Golang语言社区

厚土Go学习笔记 | 15. defer语句延迟函数的执行

当函数中有defer语句,会延迟此语句的执行,直到函数返回后才执行。 defer fmt.Println("") defer后面的是参数 延迟调用的参数是立刻生...

2788
来自专栏LIN_ZONE

javascript基础重点

1.在javascript中使用 == 比较,会自动转换数据类型再比较,有时候会 得到非常诡异的结果;一般情况下使用 === 比较,它不会自动转换数据类型,如果...

952
来自专栏流浪猫的golang

go rune 简要分析

今天看golang代码看到一个单词 rune ,熟悉而陌生。之前学习go并没有过多注意这个“神秘符号”。 rune在golang中是int32的别名,在各个...

841

扫码关注云+社区

领取腾讯云代金券