提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue之计算属性

Vue属性计算
2023-06-13 09:11:19 时间

--', newValue); const names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[1]; }, get: function () { return this.firstName + ' ' + this.lastName } },

  // fullName: function () {
  //   return this.firstName + ' ' + this.lastName
  // }
}

})

```

三、计算属性和methods对比

    <div id="app">
        <!-- 插值操作拼接字符串的方法尽量不用，因为语法过于复杂 -->
        <h2>{{firstName}} {{lastName}}</h2>

        <!-- 函数拼接字符串 -->
        <h2>{{getFullName()}}</h2>

        <!-- 计算属性拼接字符串 -->
        <h2>{{fullName}}</h2>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName : 'Taylor',
                lastName : 'Swift'
            },
            methods: {
                getFullName : function() {
                    return this.firstName + ' ' + this.lastName;
                }
            },
            computed: {
                fullName : function () {
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>

3种方法都能实现字符串的拼接：

  • 第1种插值操作的方法最好不用，因为语法过于繁琐和复杂的代码不要放在html里处理
  • 函数方法和计算属性看上去没有什么不同，但是为什么提倡使用计算属性呢？

Vue内部对计算属性有 缓存机制，只要监测到计算属性中的值没有发生变化，即使再次调用计算属性，也是将上次缓存的结果传递出去，而methods无论其中的值有没有发生变化，只要调用一次它就执行一次。 所以，在需要转换数据的情况下，计算属性的性能比methods高。

验证：

methods：

    <div id="app">
        <!-- 插值操作拼接字符串的方法尽量不用，因为语法过于复杂 -->
        <!-- <h2>{{firstName}} {{lastName}}</h2> -->

        <!-- 函数拼接字符串 -->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>

        <!-- 计算属性拼接字符串 -->
        <!-- <h2>{{fullName}}</h2> -->
    </div>
            methods: {
                getFullName : function() {
                    console.log('getFullName()被调用了');
                    return this.firstName + ' ' + this.lastName;
                }
            }

运行查看控制台：

methods执行了4次，调用了4次！

计算属性：

    <div id="app">
        <!-- 插值操作拼接字符串的方法尽量不用，因为语法过于复杂 -->
        <!-- <h2>{{firstName}} {{lastName}}</h2> -->

        <!-- 函数拼接字符串 -->
        <!-- <h2>{{getFullName()}}</h2>
            
        <!-- 计算属性拼接字符串 -->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
    </div>
            computed: {
                fullName : function () {
                    console.log('fullName被调用了');
                    return this.firstName + ' ' + this.lastName;
                }
            }

运行查看控制台：

fullName中的数据没有发生改变，由于缓存机制，即使执行了4次，也只调用了1次。

改变this.firstName的值 this.firstName一旦改变(数据发生了改变)，计算属性就马上被调用

相关完整代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!--1.直接拼接: 语法过于繁琐-->
  <h2>{{firstName}} {{lastName}}</h2>

  <!--2.通过定义methods-->
  <!--<h2>{{getFullName()}}</h2>-->
  <!--<h2>{{getFullName()}}</h2>-->
  <!--<h2>{{getFullName()}}</h2>-->
  <!--<h2>{{getFullName()}}</h2>-->

  <!--3.通过computed-->
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  // angular -> google
  // TypeScript(microsoft) -> ts(类型检测)
  // flow(facebook) ->
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Kobe',
      lastName: 'Bryant'
    },
    methods: {
      getFullName: function () {
        console.log('getFullName');
        return this.firstName + ' ' + this.lastName
      }
    },
    computed: {
      fullName: function () {
        console.log('fullName');
        return this.firstName + ' ' + this.lastName
      }
    }
  })

</script>

</body>
</html>

相关文章