Vue基础之计算属性

适用场景

设想一个场景，你需要得到一个复杂运算/逻辑的返回值，利用模板内的表达又过长且难以阅读和维护，这时计算属性就可以很好的解决你的问题。看下面的例子：

<!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>computed</title>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

  <div id="app">

    {{message.split(' ').reverse().join(' ')}}

  </div>

  <script>

    new Vue({

      el: "#app",

      data () {

        return {

          message: 'Hello world!'

        }

      }

    })

  </script>

</body>

</html>

{{message.split(' ').reverse().join(' ')}}这个表达式共进行了三种操作，但看起来并不是很清晰，并且当我们想在其他地方也用到最终值时就需要复制、粘贴冗长的一大段代码，所以这时候计算属性就可以及时的发挥它巨大的作用。

<!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>computed</title>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

  <div id="app">

    {{reverseText}}

    <hr>

    {{reverseText}}

    <hr>

    {{reverseText}}

  </div>

  <script>

    new Vue({

      el: "#app",

      data () {

        return {

          message: 'Hello world!'

        }

      },

      // 计算属性

      computed: {

        reverseText () {

          return this.message.split(' ').reverse().join(' ')

        }

      }

    })

  </script>

</body>

</html>

这时，我们就可以轻松应用结果在多个地方，而且代码还看起来更清晰了。

使用方法

在计算属性computed里可以完成各种复杂的逻辑（运算、函数调用），所有的计算属性以函数的形式写在computed里，最终返回计算结果，当message（data数据）有任何变化，计算属性会同时更新，并且更新视图。

每个计算属性都包括getter和setter，我们平时默认用到的是getter来读取。

<!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>computed</title>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

  <div id="app">

    姓：{{firstName}}

    <hr>

    名：{{lastName}}

    <hr>

    姓名：{{fullName}}

  </div>

  <script>

    new Vue({

      el: "#app",

      data () {

        return {

          firstName: '铁柱',

          lastName: '李'

        }

      },

      computed: {

        fullName: {

          // getter

          get: function() {

            return this.lastName + this.firstName

          },

          // setter

          set: function (data) {

            let name = data.split(' ')

            this.firstName = name[name.length - 1]

            this.lastName = name[0]

          }

        }

      }

    })

  </script>

</body>

</html>

默认调用时是用fullName的getter方法读取数据，想使用set方式时：

<div id="app">

  姓：{{firstName}}

  <hr>

  名：{{lastName}}

  <hr>

  姓名：{{fullName = '一 枚蛋Oops'}}

</div>

计算属性缓存

有人有可能会问，为什么不使用methods直接函数调用，这里就要区分一下他们的区别了

methods：只要重新渲染就会更新，函数就会执行。

computed：计算属性依赖的数据变化时，它才会重新取值，只要依赖数据不变化，它就不更新，可以缓存数据。

所以到底使用哪个属性是依据你的项目需求，看看你需不需要缓存。

以上是本期全部内容，欲知后事如何，请听下回分解<(￣︶￣)↗[GO!]