模板中放入太多的逻辑会让模板过重且难以维护,使用计算属性可以让模板变得简洁易于维护。计算属性是基于它们的响应式依赖进行缓存的,计算属性比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

计算属性定义在Vue对象中,通过关键词computed属性对象中定义一个个函数,并返回一个值,使用计算属性时和data中的数据使用方式一致

<div id="app">

<!-- 当多次调用 cfn计算属性时只要里面的 num值不改变,它会把第一次计算的结果直接返回直到data中的num值改变 计算属性才会重新发生计算 -->

<div>{{ cfn }}</div>

<div>{{ cfn }}</div>

<!-- 调用methods中的方法的时候  他每次会重新调用 -->

<div>{{ fn() }}</div>

<div>{{ fn() }}</div>

</div>

<script type="text/javascript">

const vm = new Vue({

el: '#app',

data: {

num: 10

},

// 方法

methods: {

fn() {

console.log('methods')

return this.num

}

},

// 计算属性

computed: {

cfn() {

console.log('computed')

return this.num

}

}

})

</script>

注:只要依赖的数据源不发生改变,我就调用1次,其它使用缓存

vue计算属性computed的更多相关文章

  1. 温故vue对vue计算属性computed的分析

    vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...

  2. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

  3. Vue计算属性computed的全面解析

    前言 一直以来对computed这个计算属性都只停在一个大概的认知中,最近特意仔细研读相关资料,亲测后逐渐了解了其特性. 正文 computed 特点: 1.初始化/依赖属性(即data属性)改变时执 ...

  4. 在做vue计算属性,v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  5. Vue学习3:计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. vue从入门到进阶:计算属性computed与侦听器watch(三)

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

  7. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  8. Vue教程:计算属性computed与侦听器watch(三)

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

  9. 007——VUE中非常使用的计算属性computed实例

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

  10. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

随机推荐

  1. threading的定时器模块,python,每间隔一段时间执行一次任务

    工作中常有一些定时任务要处理,比如使用百度的接口,它的access_token是一个更新一次的,每次使用时总是请求会很慢,所以我们把它保存起来,用定时器模块,定时在过期之前请求一次,或者定时数据同步, ...

  2. Oracle邮件发送(内容中带有收件人独有信息)

    Oracle邮件发送(内容中带有收件人独有信息) Oracle邮件发送(内容中带有收件人独有信息) Oracle发送邮件最简单的应该就是用smtp,具体使用和参数讲解我这儿没有 简单来说,发送邮件的思 ...

  3. 阿里巴巴在开源压测工具 JMeter 上的实践和优化

    简介:Apache JMeter 是 Apach 旗下的开源压测工具,创建于 1999 年初,迄今已有超过 20 年历史.JMeter 功能丰富,社区(用户群体)庞大,是主流开源压测工具之一. 作者: ...

  4. [Go] go-nsq 使用指南

    首先你需要有一个 nsq 的服务端,nsq 由三部分构成:nsqd.nsqlookupd.nsqadmin. 快速启动 nsq 一个节点看这里:https://github.com/farwish/n ...

  5. dotnet 警惕使用 StackTrace 加获取方法标记 Attribute 特性在 Release 下被内联

    大家都知道,在 dotnet 里的 Debug 下和 Release 下的一个最大的不同是在 Release 下开启了代码优化.启用代码优化,将会对生成的 IL 代码进行优化,同时优化后的 IL 也会 ...

  6. CF1800F Dasha and Nightmares

    F.Dasha and Nightmares 题意:\(n\) 个字符串 \(s_i\),问有多少对不同的 \((i, j) \ (1 \le i \le j \le n)\),使得 \(s_i\) ...

  7. SAP集成技术(十)混合集成平台

    混合集成平台hybrid integration platform (有时缩写为HIP)这个术语近年来被大量使用,但很多人可能不太清楚它的概念. 内容摘录自<SAP Interface Mana ...

  8. Solution Set - Splay

    A[洛谷P3369]维护集合,支持插入,删除,查询\(x\)的排名,查询排名\(x\)的数,查询前驱,查询后继. B[洛谷P3391]维护一个序列,支持区间翻转. C[洛谷P3380]维护数列,支持单 ...

  9. NASM中的ALIGN ALIGNB SECTALIGN

    ALIGN与ALIGNB NASM中的ALIGN与ALIGNB是用来字节对齐的,它们接收2个参数,第一个参数是必须的,表示对齐的字节数(必须是2的幂),第二个参数是可选的,表示为了对齐而进行填充的内容 ...

  10. Linux 开启防火墙端口策略

    1. 安装防火墙 yum install firewalld systemd -y 2. 手动开放防火墙端口 查看防火墙全部设置 firewall-cmd --list-all 若防火墙服务未启动可执 ...