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的更多相关文章

  1. Vue基础系列(二)——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  2. Vue中的methods、watch、computed

    看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...

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

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

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

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

  5. Vue中method与computed的区别

    为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且 ...

  6. Vue中使用watch computed

    watch:监听属性,来监听dta中的数据变化  或者route的变化 computed:计算属性, <!DOCTYPE html> <html lang="en" ...

  7. vue中watch和computed为什么能监听到数据的改变以及不同之处

    先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } ...

  8. Vue中watch与computed的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷.对于运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写. ...

  9. vue中的methods,conputed,watcher

    todo 1,computed(计算属性) 属性的结果会被缓存, 除非依赖的响应式属性变化才会重新计算, 主要 当做属性来使用;(虽然是个方法,但是当做属性使用)(场景:引用一些经过操作的数据) co ...

随机推荐

  1. qml与c++混合编程

    QML 与 C++ 混合编程内容:1. QML 扩展2. C++ 与 QML 交互3. 开发时要尽量避免使用的 QML 元素4. demo 讲解5. QML 语法C++ 与 QML 的交互是通过注册 ...

  2. js内置对象——Math

    Math()是JavaScript的内置对象(对于内置对象的理解,会单独写文章说明),包含了很多数学相关的方法: 常用方法: 1 Math.ceil(x) //取最近的最大整数返回 2 Math.fl ...

  3. 集合接口list与集合接口set的区别

    在Java中 除了 Map以外的集合的根接口都是Collection接口,而在Collection接口的子接口中,最重要的莫过于List和Set集合接口. 今天我们就来谈谈List集合接口与Set集合 ...

  4. [using_microsoft_infopath_2010]Chapter3 表单设计基础:使用InfoPath布局,控件,和视图

    本章概要 1.使用InfoPath的布局工具构建吸引人的表单 2.使用InfoPath表格工具 3.在表单上添加字段和控件 4.使用section和container组织表单里的控件 5.在一个表单上 ...

  5. linux svn命令具体解释

    检測是否安装svn:svnserve --version svn服务的关闭:killall svnserve 创建svn库:svnadmin create /opt/svn/repos 配置自己主动启 ...

  6. 一起talk C栗子吧(第一百一十二回:C语言实例--线程同步概述)

    各位看官们,大家好.上一回中咱们说的是线程间通信的样例,这一回咱们说的样例是:线程同步.闲话休提,言归正转.让我们一起talk C栗子吧! 看官们,提到同步.我想大家都不陌生,由于我们在前面章回中介绍 ...

  7. C++开发人脸性别识别教程(7)——搭建MFC框架之界面绘制

    在之前的博客中我们已经将项目中用到的算法表述完成,包含人脸检測算法以及四种性别识别算法,在这篇博客中我们将着手搭建主要的MFC框架. 一.框架概况 在这篇博文中我们将搭建最主要的MFC框架.绘制MFC ...

  8. STL 之 iterator traits 备忘

    //5种迭代器.为了激活重载机制,定义的5个类型.每种迭代器就是一个类型. struct input_iterator_tag{}; struct output_iterator_tag{}; str ...

  9. jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度

    曾经写代码中,每当须要获取元素的实际"宽度"(这里的宽度是指元素宽度加上其边距)时,都须要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方 ...

  10. bzoj2756: [SCOI2012]奇怪的游戏(网络流+分情况)

    2756: [SCOI2012]奇怪的游戏 题目:传送门 题解: 发现做不出来的大难题一点一个网络流 %大佬 首先黑白染色(原来是套路...)染色之后就可以保证每次操作都一定会使黑白各一个各自的值加1 ...