一、计算属性

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

<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:{ // methods声明的方法
clickHandler(){
this.msg = '我更改了数据'
}
},
computed:{ // compyted声明的计算属性方法
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有依赖关系,从而会相应的发生改变。

vue之计算属性和侦听器的更多相关文章

  1. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

  2. vue基础——计算属性和侦听器

    计算属性——介绍 模板内的表达式非常便利,但是设计他们的初衷是用于简单计算的.在模板中放入太多的逻辑会让模板太过沉重切难以维护.如下: <div id="example"&g ...

  3. Vue的计算属性和侦听器

    1 计算属性:他是根据对象已有的属性计算出新的属性值.具有缓存的功能,如果原始属性不变,则用缓存.否则,重新计算. 前端 <form> <label>姓</label&g ...

  4. vue基础---计算属性和侦听器

    [一]计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...

  5. vue 之 计算属性和侦听器

    计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split('').rever ...

  6. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  7. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

  8. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue.js 生命周期、计算属性及侦听器

    一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...

随机推荐

  1. 跨域、跨服务器调用时候session丢失的问题

    最近新进一个公司,做的项目是手机支付系统.由于涉及到金钱相关的,所以安全性要求特别的高.项目分了很多个子系统,在部署(测试)的时候是每个Tomcat上面只放一个子系统.比如现在有5个子系统,那么就会对 ...

  2. python 捕捉错误,exception,traceback和sys.exc_info()比较

    import traceback,sys import requests try : requests.get('dsdsd') ##故意让他出错 except Exception,e: print ...

  3. 05-Vim命令合集

    Vim命令合集 命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filena ...

  4. 处理特殊格式的GET传参

    有群友问 这样的传参格式如何接受获取 xx.php?con="one"=>5,"two"=>0,"three"=>1 那么 ...

  5. backbone学习笔记:模型(Model)(1)基础知识

    backbone为复杂Javascript应用程序提供MVC(Model View Controller)框架,框架里最基本的是Model(模型),它用来处理数据,对数据进行验证,完成后台数据与前台数 ...

  6. 【web端权限维持】利用ADS隐藏webshell

    0X01 前言 未知攻,焉知防,在web端如何做手脚维护自己拿到的权限呢?首先要面临的是webshell查杀,那么通过利用ADS隐藏webshell,不失为一个好办法. 0X02 利用ADS隐藏web ...

  7. [ZZ]c++ cout 格式化输出浮点数、整数及格式化方法

    C语言里可以用printf(),%f来实现浮点数的格式化输出,用cout呢...?下面的方法是在网上找到的,如果各位有别的办法谢谢留下... iomanip.h是I/O流控制头文件,就像C里面的格式化 ...

  8. Splash evaljs() 方法

    evaljs() 方法可以执行 JavaScript 代码并返回最后一条 JavaScript 语句的返回结果 function main(splash, args) splash:go(" ...

  9. Ansible的快速入门

    Ansible 是一个简单的自动化引擎,可完成配置管理,应用部署,服务编排等各种IT需求. Ansible使用python语言开发实现的开源软件,依赖于Jinjia2,paramiko和PyYAML这 ...

  10. oracle非空不做更新

    update test set B=nvl(p1,B),C=nvl(p2,C),D=nvl(p3,D),E=nvl(p4,E) where A='good'