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 相关文章推荐
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
JavaScript DOM 添加事件
Feb 14 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
React传值 组件传值 之间的关系详解
Aug 26 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
3.从实例开始
2006/10/09 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
python实现将excel文件转化成CSV格式
2018/03/22 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python是怎样处理json模块的
2020/07/16 Python
Python 解析简单的XML数据
2020/07/24 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
护理学毕业生求职信
2013/11/14 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
邀请书模板
2015/02/02 职场文书
文体活动总结
2015/02/04 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python