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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 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
967 个函式
2006/10/09 PHP
php中截取字符串支持utf-8
2007/01/18 PHP
用header 发送cookie的php代码
2007/03/16 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
javascript模拟命名空间
2015/04/17 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
Vue路由前后端设计总结
2019/08/06 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python中self原理实例分析
2015/04/30 Python
Python快速从注释生成文档的方法
2016/12/26 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
Pyqt5自适应布局实例
2019/12/13 Python
pytorch masked_fill报错的解决
2020/02/18 Python
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
学校安全工作制度
2014/01/19 职场文书
教职工代表大会主持词
2014/04/01 职场文书
公务员个人考察材料
2014/12/23 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技