简单了解Vue computed属性及watch区别


Posted in Javascript onJuly 10, 2020

自己的理解:

1. computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;

2. computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品 列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好 的选择

与watch之间的区别:

刚开始总是傻傻分不清到底在什么时候使用watch,什么时候使用computed。这里大致说一下自己的理解:

watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象,但是我们不能类似这样监控,比如:

watch:{
goodsList.price(newVal,oldVal){
 //监控商品列表中是商品价格
}
}

这样会报错。只能监控整个对象或单个变量,如下所示:

data(){



return {





example0:"",





example1:"",





example2:{
 





inner0:1, 



 
      
 innner1:2 



 
      }



}


},
watch:{
 example0(newVal,oldVal){//监控单个变量
   ……
 },example2(newVal,oldVal){//监控对象
   ……
 },
}

watch一般用于监控路由、input输入框的值特殊处理等等,它比较适合的场景是一个数据影响多个数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.print打印指定div实例代码
Dec 13 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
理解jquery事件冒泡
Jan 03 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 #Javascript
基于vue+element实现全局loading过程详解
Jul 10 #Javascript
JS sort方法基于数组对象属性值排序
Jul 10 #Javascript
JavaScript this指向相关原理及实例解析
Jul 10 #Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 #Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 #Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 #Javascript
You might like
PHP&MYSQL服务器配置说明
2006/10/09 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
PHP设置进度条的方法
2015/07/08 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Python分类测试代码实例汇总
2020/07/23 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
转让协议书范本
2014/04/15 职场文书
市场拓展计划书
2014/05/03 职场文书
小学语文教研活动总结
2014/07/01 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
听课评课活动心得体会
2016/01/15 职场文书