浅谈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）的差别的更多相关文章

  1. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

  2. vue中计算属性computed方法内传参

    vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...

  3. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

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

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

  5. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  6. vue中计算属性的get与set方法

    计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...

  7. Vue之计算属性Computed和属性监听Watch，Computed和Watch的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...

  8. vue中计算属性中的set和get

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body& ...

  9. 浅谈vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...

随机推荐

  1. Python Software Foundation

    The Python Software Foundation (PSF) is a 501(c)(3) non-profit corporation that holds the intellectu ...

  2. P7736-[NOI2021]路径交点【LGV引理】

    正题 题目链接:https://www.luogu.com.cn/problem/P7736 题目大意 有\(k\)层的图,第\(i\)层有\(n_i\)个点,每层的点从上到下排列,层从左到右排列.再 ...

  3. Matrix Analysis and Application

    Chap 1: Linear Equations and Matrix Linear equations Gaussian elimination Pivot; Triangularize; Back ...

  4. 【Spring技术原理】Aspectj和LoadTimeWeaving的动态代理技术实现指南

    前提介绍 当我们聊到Spring框架的项目实际开发中,用的强大的功能之一就是(面向切面编程)的这门AOP技术.如果使用得当,它的最大的作用就是侵入性比较少并且简化我们的工作任务(节省大量的重复性编码) ...

  5. 在开源项目或项目中使用git建立fork仓库

    前言: vector我们经常使用,对vector里面的基本函数构造函数.增加函数.删除函数.遍历函数我们也会用到.其中在使用遍历之后erase删除元素过程中,会出现一种删除最后一个元素破坏了迭代器的情 ...

  6. HPE ProLiant 系列服务器Microsoft Windows 2008 R2系统下网卡绑定方法

    HPE Network Configuration Utility(以下简称NCU) 网卡绑定工具,用户可以通过该工具很方便的把服务器的多个网卡捆绑到一起以达到容错和增加可用带宽的目的. 1.打开NC ...

  7. 题解 「BJOI2018 治疗之雨」

    题目传送门 题目大意 有一个初始为 \(p\) 的数,每次操作分为以下两个: 有 \(\frac{1}{m+1}\) 的概率$+1,但是中途 \(p\) 的最大值只能为 \(n\)$ 有 \(k\) ...

  8. Linux——Docker安装

    1. 安装Docker i :环境准备:Linux要求内核3.0以上 ii:安装 #1.卸载旧版本 yum remove docker \ docker-client \ docker-client- ...

  9. 【Python123】练习1: Python基本语法元素 (第1周)

    实例1: 温度转换 这是"实例"题,与课上讲解实例相同,请作答检验学习效果.‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‪‬‪‬‪‬ ...

  10. 自定义Push/Pop和Present/Dismiss转场

    项目概述 iOS中最常见的动画无疑是Push和Pop的转场动画了,其次是Present和Dismiss的转场动画. 如果我们想自定义这些转场动画,苹果其实提供了相关的API,在自定义转场之前,我们需要 ...