简单了解Vue computed属性及watch区别
更新时间：2020年07月10日 09:53:51 作者：yuwenjing
这篇文章主要介绍了通过实例解析Vue computed属性及watch区别,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
自己的理解：
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输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了element表格变化后自动刷新的两种方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家介绍了Storybook 7.0 Beta Vue3踩坑解决记录详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
浅谈vue中computed属性对data属性赋值为undefined的原因
本文主要介绍了浅谈vue中computed属性对data属性赋值为undefined的原因，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
详解Vue、element-ui、axios实现省市区三级联动
这篇文章主要介绍了Vue、element-ui、axios实现省市区三级联动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
vuex直接修改state、commit和dispatch修改state的用法及区别说明
这篇文章主要介绍了vuex直接修改state、commit和dispatch修改state的用法及区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue实现lodop打印功能的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-11-11
这篇文章主要介绍了vue在线动态切换主题色方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了vue使用$emit传递参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于Vue路由传参的三种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
插槽(Slot)技术是一种用于组件化开发的重要技术,允许我们在组件中定义一些占位符,在Vue中,插槽的使用方式可以分为三种：默认插槽、具名插槽和作用域插槽,下面我们就来看看这三种方式的具体使用吧2023-09-09
最新评论