Vue中computed及watch区别实例解析


Posted in Javascript onAugust 01, 2020

计算属性computed :

1. 支持缓存,只有依赖数据发生改变,才会重新进行计算

2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化

3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

4. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed5.如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。

Vue中computed及watch区别实例解析

侦听属性watch:

1. 不支持缓存,数据变,直接会触发相应的操作;

2.watch支持异步;

3.监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;

4. 当一个属性发生变化时,需要执行对应的操作;一对多;

5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,

immediate:组件加载立即触发回调函数执行,

deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。

Vue中computed及watch区别实例解析

监听的对象也可以写成字符串的形式

Vue中computed及watch区别实例解析

当需要在数据变化时执行异步或开销较大的操作时,这

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
原生javascript获取元素样式
Dec 31 Javascript
JScript中的条件注释详解
Apr 24 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 #Javascript
vue 组件简介
Jul 31 #Javascript
three.js 制作动态二维码的示例代码
Jul 31 #Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 #Javascript
vue抽出组件并传值实例
Jul 31 #Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 #Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 #Javascript
You might like
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
Python实现Const详解
2015/01/27 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
python中的yield from语法快速学习
2020/11/06 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
某公司的.net工程师面试题笔试题
2013/11/22 面试题
项目负责人任命书
2014/06/04 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
KTV员工管理制度
2015/08/06 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
vue封装数字翻牌器
2022/04/20 Vue.js