欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2020-10-22 22:41:21|栏目:vue|点击:

自己的理解:

  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输入框的值特殊处理等等,它比较适合的场景是一个数据影响多个数据

上一篇:Vue中UI组件库之Vuex与虚拟服务器初识

栏    目:vue

下一篇:Vue绑定内联样式问题

本文标题:简单了解Vue computed属性及watch区别

本文地址:http://www.codeinn.net/misctech/14734.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有