浅谈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中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...
随机推荐
- supervisor + celery 的简单配置与报错处理
ubuntu服务器下使用 supervisor 和 celery supervisor 的卸载过程: sudo apt purge supervisor whereis supervisord如果有用 ...
- 鸿蒙内核源码分析(工作模式篇) | CPU是韦小宝,七个老婆 | 百篇博客分析OpenHarmony源码 | v36.04
百篇博客系列篇.本篇为: v36.xx 鸿蒙内核源码分析(工作模式篇) | CPU是韦小宝,七个老婆 | 51.c.h .o 硬件架构相关篇为: v22.xx 鸿蒙内核源码分析(汇编基础篇) | CP ...
- UTF-8和Unicode编码
常用的能够保存汉字的编码表有UTF-8.GBK等.需要注意,无论文件使用的是什么编码格式,读取到Java程序中,所有的字符都是用Unicode编码表示(Java中所有的字符内容都使用char类型表示, ...
- Docker安装ElasticSearch5.6.8
前言 因实验室项目需要,准备docker安装个ES , 使用TransportClient练练手,然后死活连接不上 环境准备 系统:centos7 软件:docker ElasticSearch版本: ...
- heoi2020信号传递
状压dp 我状压学得是真烂..... 考试的时候想了状压,可是一直都是在枚举位置,没有神魔实质性突破.其实这道题的关键瓶颈也在于此,状压压的是号,而不是位置.如果 $i<=j$ 那么贡献为 $j ...
- 前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）
一.脚手架认识和使用前提 CLI 是什么意思? CLI -- Command-Line Interface 命令行界面,俗称脚手架. 脚手架就是一个大概的框架,是建筑学上的一个概念. 1.1.什么是V ...
- Stream之高级函数
上回文说到了有关Stream一些数学函数的用法.今天来说下Stream一些高级的函数用法,这些函数在日常工作中也是必不可少的,测试数据还是引用上一篇的数据. Map 这个方法我个人称之为转换函数,把一 ...
- Pandas 数据的一些基本操作
一个很偶然的机会,主动出击挑战一个之前没有尝试过的新东西,在做的过程中需要处理一些csv文件的数据,以下是我总结的一些小方法,希望对和我一样的新手朋友们有所帮助,初次尝试,望路过的朋友有更好的方法可以 ...
- C#开发BIMFACE系列42 服务端API之图纸对比
BIMFACE二次开发系列目录 [已更新最新开发文章,点击查看详细] 在我的前一篇博客<C#开发BIMFACE系列42 服务端API之图纸对比>中详细介绍了BIMFACE服务端接口 ...
- 洛谷3809 SA模板 后缀数组学习笔记（复习）
其实SA这个东西很久之前就听过qwq 但是基本已经忘的差不多了 嘤嘤嘤 QWQ感觉自己不是很理解啊 所以写不出来那种博客 QWQ只能安利一些别人的博客了 小老板 真的是讲的非常好 不要在意名字 orz ...