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 相关文章推荐
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
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漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
js下获取div中的数据的原理分析
2010/04/07 Javascript
jquery 学习笔记一
2010/04/07 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python障碍式期权定价公式
2019/07/19 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
白莲教口号
2014/06/18 职场文书
2014年教师工作总结
2014/11/10 职场文书
晚会开幕词
2015/01/28 职场文书
单位租车协议书
2015/01/29 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
python套接字socket通信
2022/04/01 Python