计算属性与方法的区别

最新推荐文章于 2024-07-23 20:34:09 发布

_XinXinM_

最新推荐文章于 2024-07-23 20:34:09 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/binbinhxx/article/details/112422639

版权

计算属性与方法的区别

计算属性是基于它们的依赖进行缓存的
方法不存在缓存

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id = "app">
  <div>{{msg}}</div>
  <div>{{reverseString}}</div>
  <div>{{reverseString}}</div>

</div>
  <script src="vue.js"></script>
  <script>
    /*计算属性*/ 
    var vm = new Vue({
      el: '#app',
      data: {
        msg:"hahahahaaaaaaaaa"
      },
      // 计算属性其实是基于data中的属性来做处理的，
      // 数据如果发生变化，计算属性最终计算的结果也是跟着变化的
      computed:{
        reverseString: function(){
          console.log('computed')
          return this.msg.split('').reverse().join('');
        }
      }
    });
  </script>
</body>
</html>

在这里插入图片描述

computed 计算属性里的方法在第一次访问的时候已经执行了，并且把计算逻辑已经处理好了，把处理好的结果已经缓存起来了。等再次执行的时候它会访问之前计算的结果，就是缓存里面已经存在的数据。
缓存的好处是节省耗时的计算以节省一些性能。同样的结果没有必要计算两次。

Document

在这里插入图片描述

methods方法函数每调用一次就会执行一次函数，但是计算属性computed如果是同样的数据，对应的data值没有发生变化的话，多次访问都是第一次计算的那个结果。
计算属性是基于它们的依赖进行缓存的，这里的依赖指的就是data里面的数据，因为computed做处理的时候都是依赖于data中的数据做处理的，只要数据中的值不发生变化，那这个计算中的结果始终是被缓存的。如果data值变了的话computed里的值也会被重新计算。缓存是基于data里的数据做缓存的，data值改变值会重新计算。方法methods就不存在缓存的机制了。每调用一次重新执行一次方法。这是computed计算属性和methods方法的区别。
缓存的意义是如果函数体内所做的工作比较复杂比较耗时的话，时间开销就会比较大，利用缓存就可以节省性能。

_XinXinM_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
计算属性与方法的区别

计算属性与方法的区别计算属性是基于它们的依赖进行缓存的方法不存在缓存<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head&g
复制链接

扫一扫