专栏首页萌兔itVue系列(四)—— 计算属性,妈妈再也不用担心我的计算啦

Vue系列(四)—— 计算属性,妈妈再也不用担心我的计算啦

Hello小伙伴们,上一次我们介绍了怎样绑定class和style,是不是很简单呢?今天我们要开始放大招啦——小伙伴们还记得被各种折腾数据折磨的日子吗,今天我们就要来解决这个问题!

计算属性

>>>>

计算属性

使用模板语言,可以直接在模板中进行简单的运算。但是如果运算过于复杂,就不易于读懂代码,并维护代码了,这个时候就需要计算属性了

我们可以像绑定一个方法一样,绑定一个计算属性。

<div id="RabbitFamily">

<p>Rabbitname: "{{ name}}"</p>

<p>Rabbit’sreverse name: "{{ reversedName }}"</p>

</div>

var vm = new Vue({

el: '#RabbitFamily',

data: {

name: 'SnowBall'

},

computed:{

reversedName: function () {

returnthis.name.split('').reverse().join('')

}

}

})

>>>>

我们不一样

既然前面说了绑定计算属性和绑定方法非常相似,并且通过绑定方法也可以达到一样的功能,那么又有什么区别呢?

事实上,虽然他们俩长得像兄弟俩,其实还真是不一样。计算属性是基于它们的响应式依赖进行缓存的,这意味着什么呢?因为对数据的计算可能存在很复杂的计算,很大的计算量,这就需要很大的开销了,如果采用一个方法去执行,每当触发重新渲染的时候就要重新执行函数,那会造成很大程度的资源浪费。而计算属性不同于方法绑定,因为有缓存的存在,在相关响应式依赖发生改变时才会重新求值。像上例中name没有变,就不用重复请求了。

侦听器

虽然计算属性很好用,但是有的时候计算属性也不是万能的,比如说数据变化的时候要执行异步或开销较大的操作的时候。

<div id="RabbitFamily">

<p>Rabbitname: "{{ name}}"</p>

<p>Rabbit’sreverse name: "{{ reversedName }}"</p>

</div>

var vm = new Vue({

el: '#RabbitFamily',

data: {

name: 'SnowBall',

reversedName:''

},

watch: {

reversedName: function (name) {

this.reversedName= this.getReversedName().split('').reverse().join('')

}

},

methods:{

getReversedName: function(){

var self = this

axios.get("")

.then(function (response) {

self.name= response.data.name

})

.catch(function (error) {

self.name = 'Error! ' + error

})

}

}

})

好啦~今天的分享就到这里啦,喜欢兔妞文章就请关注+在看吧~~

本文分享自微信公众号 - 萌兔it(mengtu_it),作者:萌兔IT

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-28

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ECharts可视化(1)——入门

    Hello小伙伴们,好久好久不见,兔妞兔君不是故意放大家鸽子的,着实是因为最近的事情太多了。不过没关系,我们肥来啦~今天开始给大家带来可视化相关的吧,我们首先从...

    萌兔IT
  • 数据结构与JS也可以成为CP(十)Graph图

    1)深度优先搜索算法比较简单:访问一个没有访问过的顶点,将它标记为已访问,再递归地去访问在初始顶点的邻接表中其他没有访问过的顶点。

    萌兔IT
  • 数据结构于JS也可以成为CP(二)列表

    Hello小伙伴们~上次分享有小伙伴在后台留言说程序就是一个数据结构,怎么说呢,我觉得这是片面的,在生产中,我们往往会尽量避免在前端写业务逻辑,因为有些不安全,...

    萌兔IT
  • 【Web技术】286- 自定义错误及扩展错误

    当我们在进行开发的时候,通常需要属于我们自己的错误类来反映任务中可能出现的特殊情况。对于网络操作错误,我们需要 HttpError,对于数据库操作错误,我们需要...

    pingan8787
  • 基于envoy的分布式gateway-contour

    Contour是开源的Kubernetes入口控制器, 为Envoy边缘和服务代理提供控制平面. Contour支持动态配置更新和多团队入口委托,同时保持轻量级...

    有点技术
  • Android之Service学习笔记

    本来想学习学习Binder通信机制,在学习的过程中又接触AIDL并开始学习,在AIDL学习过程中看到bindService,接着就想回顾一下Service的一些...

    静默加载
  • 你不知道的 WeakMap

    相信很多读者对 ES6 引入的 Map 已经不陌生了,其中的一部分读者可能也听说过 WeakMap。既生 Map 何生 WeakMap?带着这个问题,本文将围绕...

    阿宝哥
  • xadmin建站(1)

    创建工程 cmd 进入你想保存的位置:django-admin startproject MxOnline

    Centy Zhao
  • 用 Descriptor 来实现类级属性(Property)

    上篇文章简单介绍了python中描述器(Descriptor)的概念和使用,有心的同学估计已经Get√了该技能。本篇文章通过一个Descriptor的使用场景再...

    the5fire
  • 三、Models设计

    把extra_apps和apps标记为sources root,然后settings中也要加路径

    Freshman

扫码关注云+社区

领取腾讯云代金券