简单了解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 相关文章推荐
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 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 strtotime 函数UNIX时间戳
2009/01/14 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
PDO::commit讲解
2019/01/27 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
深入理解javascript中的this
2021/02/08 Javascript
python中学习K-Means和图片压缩
2017/11/20 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
C语言中break与continue的区别
2012/07/12 面试题
工程地质勘察专业大学生求职信
2013/10/13 职场文书
行政前台岗位职责
2013/12/04 职场文书
小学生新学期寄语
2014/01/19 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
置业顾问岗位职责
2015/02/09 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
MySQL系列之三 基础篇
2021/07/02 MySQL