区别：filters / data / computed / watch / methods

在配置对象options中，filters/data/computed/watch/methods的每一项都有适合的场景，并且通常在项目中都是混合使用。

data对象适合纯粹的数据。如果想要某个数据在某个地方应用后需要视图改变的话，那就好放在data对象中，如果需要响应逻辑运算后的结果那最好使用计算属性。如果需要外部参数参与逻辑运算的话那就使用方法。

filter是纯函数，适合模板或v-bind值的格式化，比计算属性高效，可以替代部分计算属性的功能。
watch适合监听异步事件，执行异步回调。

选项 可读 可写 有默认参数 可以传入参数（非默认） 进行逻辑运算 有缓存
data 是 是 无 否 可以接受简单表达式 无
computed 是get 是set set(newVal) 否 是 是
watch 是 否 （newVal, oldVal) 否 是 无
methods 是 否 事件处理对象event 是 是 无
filtes 是 否 val 是（作为第二个参数开始） 是 无

vue-learning：20 - js - 区别：filters / data / computed / watch / methods的更多相关文章

  1. Vue.js中 computed 和 methods 的区别

    官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods.watch.computed computed 的使用场景 HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护 ...

  2. Vue 中computed 与 methods 区别

    1.示例 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  3. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

  4. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  5. Vue 基础自查——watch、computed和methods的区别

    1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, w ...

  6. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

  7. 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译（一）

    (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础：JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

  9. 最新的vue没有dev-server.js文件，如何进行后台数据模拟？

    https://blog.csdn.net/qq_34645412/article/details/78833860 https://blog.csdn.net/qq_34645412/article ...

随机推荐

  1. IOS 第三方管理库管理 CocoaPods

    CocoaPod集成Tips http://www.jianshu.com/p/dcde0668eee9 import导入类失败 http://www.360doc.com/content/15/03 ...

  2. oracle 共享服务器监控

    1.   观察sga的使用情况 select * from v$sgastat where pool=’large pool’; 2.   观察调度程序是否充足: 首先看每个调度程序的忙闲: sele ...

  3. 云数据库将进入企业级百万IOPS时代

    IOPS (Input/Output Operations Per Second),即每秒进行读写(I/O)操作的次数,以衡量存储每秒可接受多少次主机发出的访问.数据库,特别是关系型数据库由于需要处理 ...

  4. Android 神兵利器之通过解析网页获取到的API数据合集，可拿来就用

    AppApis 前段时间,写了个做app的实战系列教程,其中一篇章提到了解析网页中的数据为己所用,看到大家的响应还不错,于是把自己以前解析过的网页数据都整理了下,开放出来,给更多的人使用,希望可以帮助 ...

  5. 微信小程序开发资源整理

    有兴趣学习微信小程序开发的可以关注简书专题 微信小程序开发 由于微信已经开发文档和开发工具了,所以下面的内容用处不大了. 具体参考:http://mp.weixin.qq.com/wiki/ 这篇文章 ...

  6. php 正则学习取反符号~

    php 正则学习取反符号~ ~(<a .*?>.*?</a>|<.*?>)~i 先看正则图形,有点偏差,但可以初步看出结果. 关于 ~ 是取反符号,看下面说明.

  7. 《js高级程序设计》6.1.1-6.1.3——数据属性、访问器属性

    数据属性:该属性包含了一个数据值的位置,它包含了4个描述行为的特性:1. [[Configurable]]:表示是否能通过delete删除属性从而重新定义属性,能否修改属性的特性,能否把属性修改为访问 ...

  8. 2017 ACM/ICPC Asia Regional Shenyang Online：number number number hdu 6198【矩阵快速幂】

    Problem Description We define a sequence F: ⋅ F0=0,F1=1;⋅ Fn=Fn−1+Fn−2 (n≥2). Give you an integer k, ...

  9. Mysql Command

    数据库备份: mysqldump -uroot -p -h 192.168.1.190 --default-character-set=utf8 $dbname > backup_db.sql ...

  10. linux下arm平台Qt编译环境搭建与解析

    一.概述:      我们知道QTcreator.这仅仅是个IDE,他包含了一个编译器--qmake.这两者的关系与codeblocks和g++的关系一样,首先要明确这些.      而我们在linu ...