vue篇-计算属性computed_vue computed 消耗内存-优快云博客

本文链接：https://blog.youkuaiyun.com/liumuye88888/article/details/117351081

本文详细介绍了Vue.js中的计算属性，它是一个基于依赖缓存的属性，仅在相关数据变化时重新计算。计算属性与方法的主要区别在于计算属性的值会被缓存，从而提高了性能。当在模板中多次使用计算属性时，相比于调用方法，计算属性能避免重复计算。同时，计算属性还可以设置setter，实现双向数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是计算属性

1、在computed中，可以定义一些属性，这些属性叫做计算属性
2、计算属性的本质是一个方法，不过一般是将他们的名称直接当做属性使用，不会当方法调用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <h2>{{fullName}}</h2>
    </div>
</body>
    <script src="../js/vue.min.js"></script>
    <script>
        var app=new Vue({
           el:'#app',
           data:{
               firstName:"蒙奇.D",
               lastName:"路飞"
           },
           computed:{
            fullName: function (){
                return this.firstName+ "" +this.lastName
            }
           },
          components:{}
        });
    </script>

<html>

注意点

1.计算属性，在调用的时候，一定不要加()去调用，直接将它当做普通属性使用。
2 、计算属性的function中引用的data中的数据发生了变化，就会立即重新计算这个计算属性的值。
3、计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所有来的任何数据没有发生改变，则不会重新计算。

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

  <h2>{{getFullName()}}</h2>

 methods:{
               getFullName() {
                   return this.firstName+ "" +this.lastName
               }
           },

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 firstName、lastName还没有发生改变，多次访问 getFullName计算属性会立即返回之前的计算结果，而不必再次执行函数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>{{firstName}} {{lastName}}</h2>
        <!-- 通过methods函数,使用几次调用几次 -->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>


        <!-- 通过computed,使用多次只调用一次,节省内存 -->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
    </div>
</body>
<script src="../js/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            firstName:'KoBe',
            lastName:'Bryant'
        },
        methods: {
            getFullName:function(){
                console.log("getFullName");//调用了三次
                return this.firstName + "" +this.lastName
            }
        },
        components: {},
        computed: {
            fullName:function(){
                console.log('fullName'); //只调用了一次
                return this.firstName + "" +this.lastName
            }

        }
    });
</script>

<html>

计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}