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 GridView 实现自动计算操作代码
Mar 25 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
JS async 函数的含义和用法实例总结
Apr 08 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文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
angular动态表单制作
2018/02/23 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python FTP操作类代码分享
2014/05/13 Python
让 python 命令行也可以自动补全
2014/11/30 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
Python读写zip压缩文件的方法
2018/08/29 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
中医专业应届生求职信
2013/11/17 职场文书
运动会广播稿500字
2014/01/28 职场文书
银行工作检查书范文
2014/01/31 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
北京爱情故事观后感
2015/06/12 职场文书