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弹出窗口之弹出层的小例子
Jun 17 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
Element MessageBox弹框的具体使用
Jul 27 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
php中apc缓存使用示例
2013/12/25 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
Python中的各种装饰器详解
2015/04/11 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
Python内置函数及功能简介汇总
2020/10/13 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
应聘护士自荐信
2013/10/21 职场文书
就业推荐表自我鉴定
2013/10/29 职场文书
学校读书活动总结
2014/06/30 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
售票员岗位职责
2015/02/15 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
python flask框架快速入门
2021/05/14 Python
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL