区别: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. python 不定长参数**kwargs

  2. Python中基于socketserver实现并发的socket

    1.基于TCP协议: 服务端: import socketserver class MyHandler(socketserver.BaseRequestHandler): def handle(sel ...

  3. C++四:继承与派生

    C++四:继承与派生 一.概念    继承就是从先辈处得到属性和行为特性.类的继承,是指新的类从已有类的那里得到的特性.类的派生,就是指已有类产生新类的过程. 二.应用 定义为 class 派生类名: ...

  4. 使用Laravel5做权限管理

    https://www.imooc.com/article/18250 关于权限管理的思考 最近在用laravel设计后台,后台需要有个权限管理.权限管理实质上分为两个部分,首先是认证,然后是权限.认 ...

  5. mysql 获取最近一个月每一天

    select date_add(curdate(), interval(cast(help_topic_id as signed integer) - 30) day) day from mysql. ...

  6. Nacos: Namespace 和 Endpoint 在生产环境下的最佳实践

    随着使用 Nacos 的企业越来越多,遇到的最频繁的两个问题就是:如何在我的生产环境正确的来使用 namespace 以及 endpoint.这篇文章主要就是针对这两个问题来聊聊使用 nacos 过程 ...

  7. iOS开发那些事-响应内存警告

    好的应用应该在系统内存警告情况下释放一些可以重新创建的资源.在iOS中我们可以在应用程序委托对象.视图控制器以及其它类中获得系统内存警告消息. 1.应用程序委托对象 在应用程序委托对象中接收内存警告消 ...

  8. 洛谷P2709 小B的询问 莫队

    小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重复次数.小 ...

  9. Project Euler Problem 14-Longest Collatz sequence

    记忆化搜索来一发.没想到中间会爆int #include <bits/stdc++.h> using namespace std; const int MAXN = 1000000; in ...

  10. Samba服务器 安装

    yum -y install samba cp /etc/samba/smb.conf /etc/samba/smb.conf.bak cat >> /etc/samba/smb.conf ...