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实现键盘方向键翻页功能的代码
Jun 03 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
Vue底层实现原理总结
Feb 17 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
React实现全选功能
Aug 25 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下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
php分页查询的简单实现代码
2017/03/14 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
Python多线程原理与用法实例剖析
2019/01/22 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
家庭教育先进个人事迹材料
2014/01/24 职场文书
旅游市场营销方案
2014/03/09 职场文书
倡议书格式模板
2014/05/13 职场文书
南京导游词
2015/02/03 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
导游词之南京中山陵
2019/11/27 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript