简单了解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如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
vue时间格式化实例代码
Jun 13 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
Vue.js标签页组件使用方法详解
Oct 19 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中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
php实现微信支付之现金红包
2018/05/30 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
Python目录和文件处理总结详解
2019/09/02 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Linux上比较文件的命令都有哪些
2013/09/28 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
继承权公证书范本
2015/01/23 职场文书
爱的教育读书笔记
2015/06/26 职场文书
晚会开幕词范文
2016/03/04 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
Python中time标准库的使用教程
2022/04/13 Python
python数字图像处理之图像的批量处理
2022/06/28 Python