区别：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. 【Leetcode链表】分隔链表（86）

    题目 给定一个链表和一个特定值 x,对链表进行分隔,使得所有小于 x 的节点都在大于或等于 x 的节点之前. 你应当保留两个分区中每个节点的初始相对位置. 示例: 输入: head = 1->4 ...

  2. ORA-03113: end-of-file on communication channel 解决方法

    今天在测试数据库中对一个表插入了大量的数据, 导致数据库卡死 hang 住, 重启数据库后报错如下: C:\Documents and Settings\davidd>sqlplus " ...

  3. 大话鸿蒙操作系统（一）-- 先聊聊 Fuchsia OS

    大话鸿蒙操作系统(一) 第一篇先不聊鸿蒙操作系统,聊聊 Google 的新系统 Fuchsia OS. 先看看 Fuchsia OS 介绍. 为什么 Google 要造新的 Fuchsia OS 操作 ...

  4. 【Leetcode链表】环形链表 II（142）

    题目 给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos ...

  5. jquery( 点击按钮出来文本框并限制文本框的个数)

    // 首先呢  编辑这个文章  主要是用于和大家的交流  以便学习和交流!! <div class="form-group" id="spots"> ...

  6. sql —— having

    在 SQL 中增加 HAVING 子句原因是,WHERE 关键字无法与聚合函数一起使用.HAVING 子句可以让我们筛选分组后的各组数据. 原表: 我们可以对上面数据根据性别这个字段进行分组查询,分别 ...

  7. C++讲课总结 标签： c++总结 2015-02-28 14:48 671人阅读 评论(25) 收藏

    昨天老师算是给串了一本C++ 的课本,根据自己的理解,赶紧记录一下,也好作为自己学习时候的根据. C++编程简介:每本讲语言的书,第一章总是简介,内容无非是发展历史,语言特色等东西,专业的东西不多,都 ...

  8. 2019-8-31-dotnet-通过-WMI-获取系统信息

    title author date CreateTime categories dotnet 通过 WMI 获取系统信息 lindexi 2019-08-31 16:55:59 +0800 2019- ...

  9. hdu 3982 Harry Potter and J.K.Rowling （半平面交 + 圆与多边形交）

    Problem - 3982 题意就是给出一个圆心在原点半径为R的圆形蛋糕,上面有一个cherry,对蛋糕切若干刀,最后要求求出有cherry的那块的面积占整个蛋糕的多少. 做法显而易见,就是一个半平 ...

  10. 在SuperSocket中启用TLS/SSL传输层加密

    关键字: TLS, SSL, 传输层加密, 传输层安全, 证书使用, X509Certificate SuperSocket 支持传输层加密(TLS/SSL) SuperSocket 有自动的对TLS ...