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 preload&lazy load
May 13 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
JS实现简单打字测试
Jun 24 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 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 array_search() 函数使用
2010/04/13 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
js 中的switch表达式使用示例
2020/06/03 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
简单介绍Python中的floor()方法
2015/05/15 Python
python中map()与zip()操作方法
2016/02/27 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
python实现数据库跨服务器迁移
2018/04/12 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
django实现用户注册实例讲解
2019/10/30 Python
Python列表解析操作实例总结
2020/02/26 Python
植物选择:Botanic Choice
2017/02/15 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
房产公证书范本
2014/04/10 职场文书
《去年的树》教学反思
2014/04/11 职场文书
节能减排倡议书
2014/04/15 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
Javascript设计模式之原型模式详细
2021/10/05 Javascript