Vue基本之盘算属性

2024年5月18日 139次阅读 来源: 一枚蛋Oops

实用场景

想象一个场景，你须要获得一个庞杂运算/逻辑的返回值，运用模板内的表达又太长且难以浏览和保护，这时候盘算属性就能够很好的处理你的题目。看下面的例子：

<!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!]

    原文作者：一枚蛋Oops
    原文地址: https://segmentfault.com/a/1190000018520049
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞