简单了解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 相关文章推荐
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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 第二节 数据类型之转换
2012/04/28 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
Python 代码调试技巧示例代码
2020/08/11 Python
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
database面试题
2013/03/28 面试题
事业单位请假制度
2014/01/13 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
教师读书活动总结
2014/05/07 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
在职证明书模板
2015/06/15 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers