Vue.js中computed和methods的区别

本文通过实例代码分析了Vue.js中computed和methods的主要区别,包括调用方式、绑定方式及缓存机制。虽然两者都能实现字符串反转,但computed具有缓存特性,适合处理复杂计算且结果依赖于数据的场景,以提高性能。
摘要由CSDN通过智能技术生成

Vue.js中computed和methods的区别

首先我们在浏览器上运行以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed和methods的区别</title>
  <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="demo">
  <p>这是原字符串:<span style="font-weight: bold">{{message}}</span></p>
  <p>这是调用method里的方法后返回的字符串:<span  style="font-weight: bold">{{reverseMsgInMethod()}}</span></p>
  <p>这是调用computed里的方法后返回的字符串:<span  style="font-weight: bold">{{reverseMsgInComputed}}</span></p>
</div>
<script>
  var vm=new Vue({
    el:'#demo',
    data:{
      message:"computed和methods的区别"
    },
    methods:{
      //倒转字符串
      reverseMsgInMethod:function (){
        return this.message.split('').reverse().join('');
      }
    },
    computed:{
      reverseMsgInComputed:function (){
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>
</body>
</html>

运行结果如下所示:
运行结果

我们可以惊奇的发现,调用method里的方法和computed里的方法的结果居然是一致的。那么难道说computed和motheds没有区别吗?

其实,computed和methods是有区别的,具体有以下三点:

  1. 调用方式不同:methods里的方法是以函数形式被调用的,因此在引用时需要加上括号,
    {{reverseMsgInMethod()}},而computed里的方法是以对象形式被调用的,因此不用加括号,如{{reverseMsgInComputed}}

  2. 绑定方式不同:methods与compute纯get方式都是单向绑定,不可以更改输入框中的值。compute的get与set方式是真正的双向绑定。

  3. 是否有缓存区:methods没有缓存,因此每次被调用时会重复执行里面的代码,而computed存在缓存,只要缓存区的值没有被改变,每次被调用是直接返回缓存的计算结果的。所以说,对于那种代码块运行时间长,数据结构冗杂的方法,可以放在computed中以减少开销。



参考文章:浅谈Vue的methods与computed的区别

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值