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制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
javascript三种代码注释方法
Jun 02 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
async/await地狱该如何避免详解
May 10 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 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动态生成虚拟现实VRML网页
2006/10/09 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
python验证码识别的实例详解
2016/09/09 Python
教你学会使用Python正则表达式
2017/09/07 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
python函数的万能参数传参详解
2019/07/26 Python
Python如何调用JS文件中的函数
2019/08/16 Python
python中p-value的实现方式
2019/12/16 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
利用Python优雅的登录校园网
2020/10/21 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
启动仪式策划方案
2014/06/14 职场文书
财务会计岗位职责
2015/02/03 职场文书
考研导师推荐信范文
2015/03/27 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
MySQL大小写敏感的注意事项
2021/05/24 MySQL
详解SQL的窗口函数
2022/04/21 Oracle