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 ...
随机推荐
- [UER #1] DZY Loves Graph
题目描述 开始有 \(n\) 个点,现在对这 \(n\) 个点进行了 \(m\) 次操作,对于第 \(i\) 个操作(从 \(1\) 开始编号)有可能的三种情况: \(Add\) a b: 表示在 \ ...
- P4962 朋也与光玉题解
题目链接 光坂小镇是一个由 n 个点(编号为 1 ~ n),m 条有向边构成的图,每个节点上都有一个光玉,光玉共有 k 种,编号为 0 ~ k−1. 为了使一切改变,朋也需要找齐全部的 k种光玉.他可 ...
- thread 多线程2
###24.04_多线程(多线程程序实现的方式1)(掌握) * 1.继承Thread * 定义类继承Thread * 重写run方法 * 把新线程要做的事写在run方法中 * 创建线程对象 * 开启新 ...
- scrapy之360图片爬取
#今日目标 **scrapy之360图片爬取** 今天要爬取的是360美女图片,首先分析页面得知网页是动态加载,故需要先找到网页链接规律, 然后调用ImagesPipeline类实现图片爬取 *代码实 ...
- 3.学习Dispatcher
3.学习Dispatcher 不管是WinForm应用程序还是WPF应用程序,实际上都是一个进程,一个进程可以包含多个线程,其中有一个是主线程,其余的是子线程. 在WPF或WinForm应用程序中,主 ...
- Ubuntu:MySQL与phpmyadmin安装、配置并使用。
0. 小建议 Ubuntu 16.04.因为MySQL对于Ubuntu 18.04不是很适配,会出现终端MySQL无法输入中文等问题.如果用Ubuntu 18.04,会需要多解决很多细节问题. 建议将 ...
- WPF 样式Style
一:样式基础 如果我们的程序有三个这样的按键,一般我们会这样写 <StackPanel> <!--按键的背景色为Azure蔚蓝色背景色为Coral珊瑚色字体为Arial加粗字体大小为 ...
- BeanPostProcessor(转)
BeanPostProcessor简介 BeanPostProcessor是Spring IOC容器给我们提供的一个扩展接口.接口声明如下: public interface BeanPostProc ...
- Excel筛选操作
Excel的筛选操作如下: 选中指定列: 点击"开始"中的"排序和筛选" 点击如下小三角即可按条件进行筛选
- netty之IO演进之路
常见IO类型: 传统的同步阻塞I/O编程<BIO> 基于NIO的非阻塞编程 基于NIO2.0的异步非阻塞AIO编程 BIO缺点: 没有数据缓冲区,I/O性能存在问题 没有Channel概念 ...