浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性（computed）和方法（methods）的差别
源码地址
methods方法和computed计算属性，两种方式的最终结果确实是完全相同
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，才会重新求值，
methods方法，每当触发重新渲染时，调用方法将总会再次执行函数。
使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用 计算属性，除非你不希望得到缓存。
对于任何复杂逻辑，你都应当使用计算属性
例如
<body>
<div id="app">
{{f}}
<br>
<hr>
{{ff()}}
</div>
<script>
var k = 10;
var app = new Vue({
el: '#app',
data: {
a: 5,
b: 1
},
computed: {
f() {
console.log("f");
return this.a + this.b + k;
}
},
methods: {
ff() {
console.log("ff");
return this.a + this.b + k;
}
}
})
</script>
</body>
运行结果如下：
接下来我们在控制台进行一系列操作帮助理解它们的区别
我们发现，当我们改变全局变量k的值时，再次调用方法时结果会发生改变，而计算属性的值却并没有发生改变，（因为k并不是Vue实例里data属性的值）
浅谈Vue中计算属性（computed）和方法（methods）的差别的更多相关文章
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
- Vue之计算属性Computed和属性监听Watch，Computed和Watch的区别
一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...
- vue中计算属性中的set和get
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body& ...
- 浅谈vue中的计算属性和侦听属性
计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...
随机推荐
- kvm安装window系统及使用NFS动态迁移
验证是否开启虚拟化 # grep -E 'svm|vmx' /proc/cpuinfo - vmx is for Intel processors - svm is for AMD processor ...
- bzoj4094 && luogu3097 最优挤奶
题目大意: 给定n个点排成一排,每个点有一个点权,有m次修改,每次改变某个点的点权并将最大点独立集计入答案,输出最终的答案 其中\(n\le 40000\ , \ m\le 50000\) QWQ说实 ...
- docker中Jenkins启动无法安装插件，版本过低
一.问题现象: 使用docker启动jenkins,在jenkins启动后却无法安装jenkins的插件,一直提示安装失败且从log看到提示信息显示为需要升级jenkins的版本 二.原因分析: 在使 ...
- PAT (Basic Level) Practice （中文）1086 就不告诉你 (15分)
1086 就不告诉你 (15分) 做作业的时候,邻座的小盆友问你:"五乘以七等于多少?"你应该不失礼貌地围笑着告诉他:"五十三."本题就要求你,对任何一对给定的 ...
- Flask聚合函数(基本聚合函数、分组聚合函数、去重聚合函数)）
Flask聚合函数 1.基本聚合函数(sun/count/max/min/avg) 使用聚合函数先导入:from sqlalchemy import func 使用方法: sun():func.sum ...
- 【UE4 设计模式】简单工厂模式 Simple Factory Pattern
概述 描述 又称为静态工厂方法 一般使用静态方法,根据参数的不同创建不同类的实例 套路 创建抽象产品类 : 创建具体产品类,继承抽象产品类: 创建工厂类,通过静态方法根据传入不同参数从而创建不同具体产 ...
- Spring 5 MVC 中的 Router Function 使用
Spring 5 发行已经好几年了,里面提出了好几个新点子.其中一个就是 RouterFunction,这是个什么东西呢? Spring框架给我们提供了两种http端点暴露方式来隐藏servlet原理 ...
- UltraSoft - Alpha - 发布声明
DDL_Killer Alpha版本发布声明 1. Alpha 阶段功能描述与版本实现 功能描述 设计原型 Alpha实现 登陆界面 注册界面 首页 日历视图 事项详情页 新建事项 列表视图 课程视图 ...
- [no_code][Alpha]发布声明报告
项目 内容 2020春季计算机学院软件工程(罗杰 任健) 2020春季计算机学院软件工程(罗杰 任健) 作业要求 发布声明 我们在这个课程的目标是 设计出一个OCR表单处理软件 这个作业在哪个具体方面 ...
- the Agiles Scrum Meeting 12
会议时间:2020.4.20 21:00 1.每个人的工作 今天已完成的工作 个人结对项目增量开发组: 自动评测系统基本开发完成,实现个人项目自动评测功能 issues: 个人结对功能开发组:开发自动 ...