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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
javascript 函数速查表
Feb 07 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
php类
2006/11/27 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
js里面的变量范围分享
2020/07/18 Javascript
Python学习资料
2007/02/08 Python
python动态加载变量示例分享
2014/02/17 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
python字符类型的一些方法小结
2016/05/16 Python
python出现"IndentationError: unexpected indent"错误解决办法
2017/10/15 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python调用c++传递数组的实例
2019/02/13 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python线程join方法原理解析
2020/02/11 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
购买一个高级域名:BuyDomains
2018/03/11 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
医学生求职自荐书
2014/06/12 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
嘉宾邀请函
2015/01/31 职场文书
合理化建议书
2015/02/04 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
国际贸易实训总结
2015/08/03 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
Android Rxjava3 使用场景详解
2022/04/07 Java/Android