Vue 计算属性

Posted 2020-11-27 landuo629

计算属性

• 特性：当他依赖的值发生变化的时候会重新计算其属性

对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

• 比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
• 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
• 计算属性是写在实例的computed选项中的

<div id="app">
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{fullName}}</h2>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Kobe',
      lastName: 'Bryant'
    },
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName
      }
    }

计算属性的复杂操作

<div id="app">
  <h2>总价值: {{totalPrice}}</h2>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {name: 'Java编程思想', price: 99, count: 3},
        {name: 'Unix编程艺术', price: 118, count: 2},
        {name: 'Vuejs程序设计', price: 89, count: 1},
      ]
    },
    computed: {
      totalPrice() {
        // 1.第一种方式
        /*
        let total = 0
        this.books.forEach(book => {
          total += book.price * book.count
        })
        return total
        */

        // 2.第二种方式
        // let total = 0
        // for (let i in this.books) {
        //   const book = this.books[i]
        //   total += book.price * book.count
        // }
        // return total

        // 3.第三种方式,高阶函数
        return this.books.reduce((preValue, book) => {
          return preValue + book.price * book.count
        }, 0)
      }
    }
  })

计算属性的setter和getter

• 默认为get属性必须有返回值，用来获取属性，称为get函数，set属性使用时需要自己调用
• get属性用来获取计算属性(只读)
• set属性用来设置计算属性(可写)

<div id="app">
  <h2>{{fullName}}</h2>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Kobe',
      lastName: 'Bryant'
    },
    computed: {
      fullName: {
        set(newValue) {
          const names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[1]
        },
        get() {
          return this.firstName + ' ' + this.lastName
        }
      }
    }
  })

计算属性的缓存及computed和methods

• 计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。
• 所得到的值没有任何的区别
• 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值，多次访问 get 计算属性会立即返回之前的计算结果，而不必再次执行函数
• methods方法，每当触发重新渲染时，调用方法将总会再次执行函数
• 对于任何复杂逻辑，你都应当使用计算属性(增强性能)

  computed: {
      fullName() {
        console.log('调用了computed中的fullName');
        return this.firstName + ' ' + this.lastName
      }
    },
    methods: {
      getFullName() {
        console.log('调用了methods中的getFullName');
        return this.firstName + ' ' + this.lastName
      }
    }