vue中computed、metfods、watch的区别

一、computed和methods

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果,两种方式确实是相同的。

不同的是computed计算属性是基于它们的依赖进行缓存的。计算属性computed只有在它的相关依赖发生改变时才会重新求值。这就意味着只要计算依赖的值还没有发生改变,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。而对于method ,只要发生重新渲染,method 调用总会执行该函数。

当有一个性能开销比较大的的计算属性 A ,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A ,这时候,我们就需要缓存!

但是,缓存也有自己的缺点:

也同样意味着下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖:

computed: {now: function () {return Date.now()}
}    

  so:数据量大,需要缓存的时候用computed;每次确实需要重新加载,不需要缓存时用methods

二、computed和watch

computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时,我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性,而不是命令是的watch回调。 computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性,当相关数据没有变化是,它会读取缓存。而不必想 motheds方法 和 watch 方法是的每次都去执行函数。

这里我直接引用vue官网的例子来说明:

html:

我们要实现 第三个表单的值 是第一个和第二个的拼接,并且在前俩表单数值变化时,第三个表单数值也在变化

<div id="myDiv"><input type="text" v-model="firstName"><input type="text" v-model="lastName"><input type="text" v-model="fullName">
</div>

js: 用watch方法来实现

new Vue({el: '#myDiv',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}}
})

js: 利用computed 来写

new Vue({el:"#myDiv",data:{firstName:"Den",lastName:"wang",},computed:{fullName:function(){return  this.firstName  + " " +this.lastName;}}})

  so:尽量用computed计算属性来监视数据的变化,因为它本身就这个特性,用watch没有computed“自动”,手动设置使代码变复杂。

转载于:https://www.cnblogs.com/cassiel/p/9104765.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/250201.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OI生涯回忆录(二)

&#xff08;二&#xff09;NOIP2016之后到HLOI2017 之后变得有点颓废&#xff0c;因为有的地方难度上来了&#xff0c;碰见不会的题我就会放挺。又或者有时候题水&#xff0c;改完了就不思进取了。到了过年前那几天连着考了几天试&#xff0c;好像是长春那边冬令营&#xff08…

[tensorflow、神经网络] - 使用tf和mnist训练一个识别手写数字模型,并测试

参考 包含: 1.层级的计算、2.训练的整体流程、3.tensorboard画图、4.保存/使用模型、5.总体代码(含详细注释) 1. 层级的计算 如上图,mnist手写数字识别的训练集提供的图片是 28 * 28 * 1的手写图像,初始识别的时候,并不知道一次要训练多少个数据,因此输入的规模为 [None, 784].…

面向过程、面向函数、面向对象的区别浅谈

Python的面向过程、面向函数、面向对象的区别浅谈 转自--猎奇古今&#xff0c;加上其他 有人之前私信问我&#xff0c;python编程有面向过程、面向函数、面向对象三种&#xff0c;那么他们区别在哪呢&#xff1f; 面向过程就是将编程当成是做一件事&#xff0c;要按步骤完成&am…

js算法初窥06(算法模式03-函数式编程)

在解释什么是函数式编程之前&#xff0c;我们先要说下什么是命令式编程&#xff0c;它们都属于编程范式的一种。命令式编程其实就是一块一块的代码&#xff0c;其中包括了我们要执行的逻辑或者判断或者一些运算。也就是按部就班的一步一步完成我们所需要的逻辑。而函数式编程则…

[mmdetection] - win10配置mmdetection(1.1和2.0) + 训练网络(faster-rcnn、mask-rcnn)

pytorch配置 - 参考 mmdetextion 配置(win10) mmdetection训练faster-rcnn (win10) mmdetection训练mask-rcnn (win10) mmdetection 2.0配置(win10) mmdetection 2.0训练Faster-RCNN&#xff08;win10) mmdetection 2.0全家桶训练&#xff08;终结版) labelme安装教程 l…

13、Spring Boot 2.x 多数据源配置

1.13 Spring Boot 2.x 多数据源配置 完整源码&#xff1a; Spring-Boot-Demos转载于:https://www.cnblogs.com/Grand-Jon/p/9999779.html

[pytorch、学习] - 3.5 图像分类数据集

参考 3.5. 图像分类数据集 在介绍shftmax回归的实现前我们先引入一个多类图像分类数据集 本章开始使用pytorch实现啦~ 本节我们将使用torchvision包,它是服务于PyTorch深度学习框架的,主要用来构建计算机视觉模型。torchvision主要由以下几部分构成: torchvision.datasets: …

python自动化第三周---文件读写

1.python文件对象提供了三个“读”方法&#xff1a; read()、readline() 和 readlines()。每种方法可以接受一个变量以限制每次读取的数据量。 read() 每次读取整个文件&#xff0c;它通常用于将文件内容放到一个字符串变量中。如果文件大于可用内存&#xff0c;为了保险起见&a…

最详细的java泛型详解

来源&#xff1a;最详细的java泛型详解 对java的泛型特性的了解仅限于表面的浅浅一层&#xff0c;直到在学习设计模式时发现有不了解的用法&#xff0c;才想起详细的记录一下。 本文参考java 泛型详解、Java中的泛型方法、 java泛型详解 1. 概述 泛型在java中有很重要的地位&a…

[pytorch、学习] - 3.6 softmax回归的从零开始实现

参考 3.6 softmax回归的从零开始实现 import torch import torchvision import numpy as np import sys sys.path.append("..") import d2lzh_pytorch as d2l3.6.1. 获取和读取数据 batch_size 256 train_iter, test_iter d2l.load_data_fashion_mnist(batch_si…

Django基础必备三件套: HttpResponse render redirect

1. HttpResponse : 它的作用是内部传入一个字符串参数, 然后发给浏览器 def index(request):return HttpResponse(ok) 2. render : 可以接收三个参数, 一是request参数, 二是待渲染的 html 模板文件, 三是保存具体数据的字典参数 def index(request):return render(request, …

React 简单实例 (React-router + webpack + Antd )

React Demo Github 地址 经过React Native 的洗礼之后&#xff0c;写了这个 demo &#xff1b;React 是为了使前端的V层更具组件化&#xff0c;能更好的复用&#xff0c;同时可以让你从操作dom中解脱出来&#xff0c;只需要操作数据就会改变相应的dom&#xff1b; 而React Nat…

[pytorch、学习] - 3.7 softmax回归的简洁实现

参考 3.7. softmax回归的简洁实现 使用pytorch实现softmax import torch from torch import nn from torch.nn import init import numpy as np import sys sys.path.append("..") import d2lzh_pytorch as d2l3.7.1. 获取和读取数据 batch_size 256 train_iter…

【模板】NTT

NTT模板 #include<bits/stdc.h> using namespace std; #define LL long long const int MAXL22; const int MAXN1<<MAXL; const int Mod998244353; int rev[MAXN],A[MAXN],B[MAXN],C[MAXN]; int fast_pow(int a,int b){int ans1;while(b){if(b&1)ans1ll*ans*a%…

centos 7 php7 yum源

rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpmrpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm 转载于:https://www.cnblogs.com/myJuly/p/10008252.html

[pytorch、学习] - 3.9 多重感知机的从零开始实现

参考 3.9 多重感知机的从零开始实现 import torch import numpy as np import sys sys.path.append("..") import d2lzh_pytorch as d2l3.9.1. 获取和读取数据 batch_size 256 train_iter, test_iter d2l.load_data_fashion_mnist(batch_size)3.9.2. 定义模型参…

C语言逗号运算符和逗号表达式基础总结

逗号运算符的作用&#xff1a; 1&#xff0c;起分隔符的作用&#xff1a; 定义变量用于分隔变量&#xff1a;int a,b输入或输出时用于分隔输出表列 printf("%d%d",a,b) 2,用于逗号表达式的顺序运算符 语法&#xff1a;表达式1&#xff0c;表达式2&#xff0c;...,表达…

java基础-泛型举例详解

泛型 泛型是JDK5.0增加的新特性&#xff0c;泛型的本质是参数化类型&#xff0c;即所操作的数据类型被指定为一个参数。这种类型参数可以在类、接口、和方法的创建中&#xff0c;分别被称为泛型类、泛型接口、泛型方法。 一、认识泛型 在没有泛型之前,通过对类型Object的引用来…

MySQL数据库视图(view),视图定义、创建视图、修改视图

原文链接&#xff1a;https://blog.csdn.net/moxigandashu/article/details/63254901转载于:https://www.cnblogs.com/chrdai/p/9131881.html

[pytorch、学习] - 3.10 多重感知机的简洁实现

参考 3.10. 多重感知机的简洁实现 import torch from torch import nn from torch.nn import init import numpy as np import sys sys.path.append("..") import d2lzh_pytorch as d2l3.10.1. 定义模型 num_inputs, num_outputs, num_hiddens 784, 10, 256 # 参…