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实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
js获取url传值的方法
Dec 18 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
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编程开发“虚拟域名”系统
2006/10/09 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
python实现图片处理和特征提取详解
2017/11/13 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Python将字典转换为XML的方法
2020/08/01 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
机电一体化职业规划书
2014/01/07 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
合作协议书怎么写
2014/04/18 职场文书
幼儿发展评估方案
2014/06/11 职场文书
超市创业计划书
2014/09/15 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
2014年化验室工作总结
2014/11/21 职场文书
高三语文教学反思
2016/02/16 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python