vue中的methods,conputed,watcher
todo
1,computed(计算属性) 属性的结果会被缓存, 除非依赖的响应式属性变化才会重新计算, 主要 当做属性来使用;(虽然是个方法,但是当做属性使用)(场景:引用一些经过操作的数据)
computed: {
fullName: function () {
return this.firstName + this.lastName
}
}
1)firstName和lastName任意一个变化都会发生改变,但若都不发生变化,则直接取缓存中的值
2)fullName作为变量直接用在{{}}中,不可与data中的变量名重叠
2,methods(方法)表示一个具体的操作, 主要写 业务逻辑;(场景:方法的调用)
3,watch(监听器)一个对象, 键是需要观测的表达式, 值是对应的回调函数. 主要用来 监听某些特定数据的变化,从而进行某些业务逻辑的操作; 可以看做是computed和methods的结合体;(场景:监听路由地址)
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
1)简单理解:firstName是data或者computed中的变量,当其变化时会触发相应的函数变化
2)watch的handler,immediate和deep属性 https://www.jianshu.com/p/b70f1668d08f
vue中的methods,conputed,watcher的更多相关文章
- Vue中的三种Watcher
Vue中的三种Watcher Vue可以说存在三种watcher,第一种是在定义data函数时定义数据的render watcher:第二种是computed watcher,是computed函数在 ...
- Vue基础系列(二)——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- Vue中的methods、watch、computed
看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...
- vue中的methods、computed和watch
1.computed属性: 经过处理返回的数据值,只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数才会发生改 ...
- Vue基础系列(四)——Vue中的指令(上)
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列(五)——Vue中的指令(中)
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- VUE中常用的十大过滤器
在vue的学习过程中,我发现过滤器是一个很好用的工具,过滤器(Filters)来渲染数据是一种很有趣的方式.过滤器不能替代Vue中的methods.computed或者watch,不改变真正的data ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- Vue中computed,methods 和watch
Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...
随机推荐
- MySQL_基础
## 数据库的基本概念 1. 数据库的英文单词: DataBase 简称 : DB 2. 什么数据库? * 用于存储和管理数据的仓库. 3. 数据库的特点: 1. 持久化存储数据的.其实数据库就是一个 ...
- Spring中pom文件所需节点
<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...
- Centos7安装elasticsearch6.3及ik分词器,设置开机自启
参考Elasticsearch 在CentOs7 环境中开机启动 建议虚拟机的内存大小为4G 1. 新建一个用户john 出于安全考虑,elasticsearch默认不允许以root账号运行. 创建用 ...
- Ubantu问题记录
2019.4.21Ubantu问题:常用命令:sudo是一种权限管理机制,依赖于/etc/sudoers,定义了授权给哪个用户可以以管理员的身份执行管理命令格式:sudo -u USERNAME CO ...
- 删除项目中所有的__pycache__ 文件
关于 pycache 当第一次运行 python 脚本时,解释器会将 *.py 脚本进行编译并保存到 __pycache__ 目录 下次执行脚本时,若解释器发现你的 *.py 脚本没有变更,便会跳过编 ...
- jmeter强大的扩展插件!!
jmeter4.0以上版本,如jmeter5.1.1版本的集成插件,只需要在官网下下载“plugins-manager.jar”包,放在jmeter安装路径的lib/ext目录下即可使用. (但该ja ...
- Elasticsearch入门教程(四):Elasticsearch文档CURD
原文:Elasticsearch入门教程(四):Elasticsearch文档CURD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...
- OpenCV处理文件、视频和摄像头
图像的本质(图像可以用数组来表示) import numpy as np import cv2 img = np.zeros((3, 3), dtype=np.uint8) print(img, im ...
- MySQL数据库入门备份数据库
MySQL数据库入门——备份数据库 一提到数据,大家神经都会很紧张,数据的类型有很多种,但是总归一点,数据很重要,非常重要,因此,日常的数据备份工作就成了运维工作的重点中的重点的重点....... ...
- PHPStorm 远程开发教程
目的:实现在windows下开发,而所改变代码自动同步到虚拟机 查看虚拟机的 IP地址 配置代码自动同步信息 通过页面上部的选项卡,切换到 Mappings 根路径:指的都是项目代码的根路径 点击一次 ...