doina

一个小菜鸟运维工程师.

vue computed计算属性

  • 每个计算属性都包含一个getter和一个setter
  • 在上面的例子中,我们只是使用getter来读取。
  • 在某些情况下,你也可以提供一个setter方法(不常用)。
  • 计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。
  • 在需要写setter的时候,代码如下:
 fullName: {
        set(newValue) {
          console.log('调用了fullName的set方法');
          const names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[1]
        },
        get() {
          console.log('调用fullName的get方法');
          return this.firstName + this.lastName
        },
      }

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>完整姓名: {{firstName}} {{lastName}}</h2>
  <h2>完整姓名: {{fullName}}</h2>


  <h2>总价格: {{totalPrice1}}</h2>
  <h2>总价格: {{totalPrice2}}</h2>
  <h2>总价格: {{totalPrice3}}</h2>
  <h2>总价格: {{getTotalPrice()}}</h2>
</div>

<script src="../js/vue.v2.6.12.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'baiyongjie',
      firstName: 'bai',
      lastName: 'yongjie',
      books: [
        {id: 1, name: 'python入门到放弃', price: 69},
        {id: 2, name: 'Linux入门到放弃', price: 79},
        {id: 3, name: 'Ansible入门到放弃', price: 89},
        {id: 4, name: 'Vue入门到放弃', price: 99},
      ]
    },
    // 计算属性 在引用是不需要加()调用, 直接引用即可, 如果有多次调用, 则只执行一次函数, 有缓存功能
    computed: {
      // 简写语法, 不写set和get,默认就是get

      // 第一种求总价写法:
      totalPrice1: function () {
        let result = 0;
        for (let i =0 ;i < this.books.length; i++) {
          result += this.books[i].price
        }
        return result
      },

      // 第二种求总价写法:
      totalPrice2: function () {
        let result = 0;
        for (let i in this.books) {
          result += this.books[i].price
        }
        return result
      },

      // 第三种求总价写法:
      totalPrice3: function () {
        let result = 0;
        for (let book of this.books) {
          result += book.price
        }
        return result
      },

      // 完整语法, 每个计算属性都包含一个getter和一个setter, 上面例子中只是使用getter来读取, 还有一个setter语法, 不过不常用
      fullName: {
        set(newValue) {
          console.log('调用了fullName的set方法');
          const names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[1]
        },
        get() {
          console.log('调用fullName的get方法');
          return this.firstName + this.lastName
        },
      }
    },

    // 方法, 在引用是使用加()调用, 调用多次, 就会执行多次函数
    methods: {
      getTotalPrice: function () {
        let result = 0;
        for (let i = 0; i < this.books.length; i++) {
          result += this.books[i].price
        }
        return result
      }
    }
  })
</script>

</body>
</html>
点赞

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据