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 相关文章推荐
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
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网站地图生成类示例
2014/01/13 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
js实现常用排序算法
2016/08/09 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
python基础教程项目三之万能的XML
2018/04/02 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
什么是python的自省
2020/06/21 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
大学新生欢迎词
2014/01/10 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
《锄禾》教学反思
2014/04/08 职场文书
主题班会演讲稿
2014/05/22 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
怎样写辞职信
2015/02/27 职场文书
施工现场安全管理制度
2015/08/05 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
分享python函数常见关键字
2022/04/26 Python