vue computed、methods、watch的区别
1.computed(计算属性)
computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上),
2.methods(方法)
写在html中的时候需要带()支持传参,且需要有触发条件(@)。
methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像watch和computed那样,“自动执行”预先定义的函数。
methods里面定义的是函数,你显然需要像"fuc()"这样去调用它(假设函数为fuc)。
methods不处理数据逻辑关系,只提供可调用的函数。
3.watch
类似于监听机制+事件机制。
4.watch/computed
当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。
都是希望在依赖数据发生改变的时候,被依赖的数据根据预先定义好的函数,发生“自动”的变化。
watch擅长处理的场景:一个数据影响多个数据。
computed擅长处理的场景:一个数据受多个数据影响。
methods里面的函数就是一群“耿直Boy”,如果有其他父函数调用它,它会每一次都“乖乖”地执行并返回结果,即使这些结果很可能是相同的,是不需要的。
而computed是一个“心机Boy”,它会以Vue提供的依赖追踪系统为基础,只要依赖数据没有发生变化,computed就不会再度进行计算。
vue computed、methods、watch的区别的更多相关文章
- vue中methods、computed、watch区别
vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...
- 【Vue】----- computed与watch的区别
1.computed computed是一种计算属性,用来监听属性的变化: computed里面的方法调用的时候不需要加(),并且里面的方法必须要有一个返回值: computed里面的方法不是通过事件 ...
- vue中computed/method/watch的区别
摘要:本文通过官方文档结合源码来分析computed/method/watch的区别. Tips:本文分析的源码版本是v2.6.11,文章中牵涉到vue响应式系统原理部分,如果不是很了解,建议先阅读上 ...
- vue中methods,computed,filters,watch的总结
08.28自我总结 vue中methods,computed,filters,watch的总结 一.methods methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就 ...
- computed 与methods , watched 的区别
computed 与watched 的区别: 异步请求 数据变化 使用watched ,计算属性不支持异步 计算一个值的结果 用 computed computed 与methods的区别: comp ...
- vue computed和methods 计算属性和侦听器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue computed 原理
vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想. computed: { a(){ return this.b ++ } } data:{ b: 1 ...
- about use Vue of methods
methods 处理事件 methods 在vue中处理一些逻辑方面的事情.vue事件监听的方式看上去有点违背分离的传统观念.而实际上vue中所有事件的处理方式和表达式都是严格绑定在当前的视图的vie ...
- vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug
vue & lifecycle methods & this bug ES6 Arrow function & this bind bug bad fetchTableData ...
- vue中methods中的方法闭包缓存问题
vue中methods中的方法闭包缓存问题 问题背景 需求描述 在路由的导航栏中需要, 判断是否为第一次点击 需要一个标志位来记录是否点击过 现状: 这个标志位只在一个函数中用过.不希望存放全局 希望 ...
随机推荐
- C语言博客作业03--函数
1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 这周最大的收获就是学习函数,并且通过对函数的封装来做成一个简单的小程序,这周做的最有意义的事情就是做了老 ...
- Q_UNUSED 的使用
在构建比较大型的工程的时候,若继承,重构虚函数,写数据model等等比较多的时候,会给出大量的 “未引用的形参” ,“warning: unused parameter ” 的告警.这种告警多了会影 ...
- nodejs 搭建本地静态服务器
1. http-server 参看 https://www.npmjs.com/package/http-server 使用http-server搭建本地静态服务器 全局安装http-server n ...
- Exp4 恶意代码分析
一.原理与实践说明 1. 实践目标 1.1 监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2 分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysin ...
- 计算机网络之iframe内联框架跨域
iframe框架同源下的数据调用 iframe框架非同源下的数据传输 一.iframe框架同源下的数据调用 1.父窗口向子窗口获取数据 //html1父级窗口 <iframe src=" ...
- (Python3) 运行结果 = 10,40 的困扰我一顿饭时间的 代码
a=10 b=30 def kzkzkz(a,b): #定义一个函数 a=a+b return a b= kzkzkz(a,b) print(a,b)
- Codeforces Round #484 (Div. 2)Cut 'em all!(dfs)
题目链接 题意:给你一棵树,让你尽可能删除多的边使得剩余所有的联通组件都是偶数大小. 思路:考虑dfs,从1出发,若当前节点的子节点和自己的数目是偶数,说明当前节点和父亲节点的边是可以删除的,答案+1 ...
- 20164305徐广皓 - Exp1 PC平台逆向破解(5)M
1.逆向及Bof基础实践说明 1.1实践目标 实践对象:pwn1的linux可执行文件 实践目的:使程序执行另一个代码(ShellCode) 实践内容: 手工修改可执行文件,改变程序执行 ...
- 第三周四则运算辅助(CAI)结对项目需求文档
小学四则运算辅助(CAI) UI需求: 目的:让更对的小学生能学到更多的知识,提高做题的效率. 背景:该系统应用于小学生数学算术题的出题,判断对错以及错题本,该系统为解决家长每天为孩子出题的不便而解决 ...
- js变量类型和计算
# js入门基础-变量类型和计算 ` --首先由于我使用了一个不太合格的markdown来编写来文章,所以在移动端阅读不要太方便,建议移动端使用横屏模式或pc端阅读,当然如果你有平板那是最好的. -- ...