vue中的methods、computed和watch
1、computed属性:
经过处理返回的数据值,只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数才会发生改变。
2、computed属性和methods属性:
你可能已经注意到我们可以通过调用method来达到同样的效果:我们可以将同一个函数定义为一个method而不是一个计算属性,对于最终的结果,两种方式确实是相同的,
然而,计算属性是基于他们的依赖就行缓存的,计算属性只有在它相关的依赖发生改变时才会重新求值,这意味着只要message 还没有发生改变,多次访问reversedMessage计算属性会立刻返回之前计划算的结果,而不必再次执行函数.这也同样意味着下面的计算属性将不再更新,
相比而言,只要发生重新渲染,method调用总会执行该函数;
我们为什么需要缓存?假设我们有一个性能开销比较大的计划属性A,
它需要便利一个极大的数组和做很大量的计算,然后我们可能尤其他的计算属性依赖A,
如果没有缓存,我们将不可避免的多次执行A的geteer,如果你不希望有缓存,请用methods代替;
因为Date.now()不是响应式依赖;
3、computed属性与watch属性:
vue确实提供了一种更通用的一种方式来观察和响应Vue实例上的数据变动:watch属性;当你有一些数据需要随着其他数据进行便动,你会很容易滥用watch--特别是你之前使用过AngularJS.然后,通常更好的想法就是使用computed属性而不是命令式的watch回调。
原文地址:https://segmentfault.com/a/1190000012708275
vue中的methods、computed和watch的更多相关文章
- Vue基础系列(二)——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- Vue中的methods、watch、computed
看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- Vue中method与computed的区别
为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且 ...
- Vue中使用watch computed
watch:监听属性,来监听dta中的数据变化 或者route的变化 computed:计算属性, <!DOCTYPE html> <html lang="en" ...
- vue中watch和computed为什么能监听到数据的改变以及不同之处
先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } ...
- Vue中watch与computed的区别
一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷.对于运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写. ...
- vue中的methods,conputed,watcher
todo 1,computed(计算属性) 属性的结果会被缓存, 除非依赖的响应式属性变化才会重新计算, 主要 当做属性来使用;(虽然是个方法,但是当做属性使用)(场景:引用一些经过操作的数据) co ...
随机推荐
- node——文件写入,文件读取
ru //实行文件操作 //文件写入 //1.加载文件操作,fs模块 var fs = require('fs'); //2.实现文件写入操作 var msg='Hello world'; //调用f ...
- HDU 4725 The Shortest Path in Nya Graph [构造 + 最短路]
HDU - 4725 The Shortest Path in Nya Graph http://acm.hdu.edu.cn/showproblem.php?pid=4725 This is a v ...
- PHP的soap 之 nusoap 的使用
今天不知道为什么想起了soap 这个东西,然后就弄了下,在php上使用的是nusoap. 一些基本的使用,高深的麻烦您自己看手册去 这个软件的下载在http://sourceforge.net/pro ...
- linux rar 解压忽略带密码压缩包
#解压忽略密码 rar x -p- file.rar #解压忽略子目录 rar x -ep file.rar
- Linux red hat 核心版下安装Nginx
不要安装核心版的Linux,不要安装核心版的Linux,不要安装核心版的Linux重要的事情要说3遍.心血来潮突然想在Linux下安装Nginx,但是在安装的国程中发现了很多问题.nginx 基本安装 ...
- vue 阿里云上传组件
vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...
- JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点
DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...
- GROUP BY 与聚合函数 使用注意点
表的设计: 表里面的内容: 一:在不使用聚合函数的时候,group by 子句中必须包含所有的列,否则会报错,如下 select name,MON from [测试.] group by name 会 ...
- linux openssl加密文件
openssl 支持的加密算法 -aes-128-cbc -aes-128-cfb -aes-128-cfb1 -aes-128-cfb8 -aes-128-ecb -aes-128-ofb -aes ...
- Unity3d修炼之路:用Mesh绘制一个Cube
#pragma strict function Awake(){ var pMeshFilter : MeshFilter = gameObject.AddComponent(typeof(MeshF ...