区别：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. 如何在Liferay 7中创建一个简单的JSF Portlet

    这个将在Liferay IDE 3.1 M3的发布版中提供创建的选项,但是你也可以通过命令行来创建. 1.这是Liferay JSF团队的官网:http://liferayfaces.org/ 你能在 ...

  2. Data Lake Analytics中OSS LOCATION的使用说明

    前言 Data Lake Analytic(后文简称 DLA)可以帮助用户通过标准的SQL语句直接对存储在OSS.TableStore上的数据进行查询分析. 在查询前,用户需要根据数据文件的格式和内容 ...

  3. photoshop正确的打开方式

    首先这边我先贴一个地址:https://www.adobe.com/cn/products/photoshop.html 安装软件,这里就不赘述了,真的不会,可以百度^_^我当初就是百度的,哈哈 说到 ...

  4. 【Leetcode链表】奇偶链表（328）

    题目 给定一个单链表,把所有的奇数节点和偶数节点分别排在一起.请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是节点的值的奇偶性. 请尝试使用原地算法完成.你的算法的空间复杂度应为 O(1 ...

  5. CODE FESTIVAL 2017 qual B B - Problem Set【水题，stl map】

    CODE FESTIVAL 2017 qual B B - Problem Set 确实水题,但当时没想到map,用sort后逐个比较解决的,感觉麻烦些,虽然效率高很多.map确实好写点. 用map: ...

  6. EF ObjectStateManager无法跟踪具有相同键的多个对象 标签： EasyUIc# 2015-09-05 11:01 1181人阅读

    最近做一个项目,因为是重构,好多代码是搬过来的,但是因为框架不同,所以搬过来也出现了很多问题,前几天在调试的时候,就碰到一个EF框架经常出现的问题:ObjectStateManager中已存在具有同一 ...

  7. Python学习（四）cPickle的用法

    python中有两个类似的:pickle与cPickle:两者的关系:“cPickle – A faster pickle” pickle模块中的两个主要函数是dump()和load().dump() ...

  8. How To Move Or Rebuild A Lob Partition

    How To Move Or Rebuild A Lob Partition [ID 761388.1]             改动时间 29-JUN-2010     类型 HOWTO     状 ...

  9. C#设置Excel行高、列宽

    设置固定值 worksheet.Columns[1].ColumnWidth = 15; 设置自动换行 worksheet.Columns.WrapText = true; 设置自动行高.列宽 xlA ...

  10. 「BZOJ2510」弱题

    「BZOJ2510」弱题 这题的dp式子应该挺好写的,我是不会告诉你我开始写错了的,设f[i][j]为操作前i次,取到j小球的期望个数(第一维这么大显然不可做),那么 f[i][j]=f[i-1][j ...