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

212 阅读 0 评论 140 点赞

我是靠谱客的博主高挑果汁，最近开发中收集的这篇文章主要介绍简单了解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输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。