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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 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 socket方式提交的post详解
2008/07/19 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
python远程登录代码
2008/04/29 Python
python搭建简易服务器分析与实现
2012/12/15 Python
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
庆元旦活动总结
2014/07/09 职场文书
机械机修工岗位职责
2014/08/03 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
政协常委会议主持词
2015/07/03 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
Python 键盘事件详解
2021/11/11 Python