Vue学习----第二天_计算属性【5.31】

一、什么是计算属性

代码如下：

<div id='app'>
    <h2>{{firstName + ' ' + lastName}}</h2>
    <h2>{{firstName}} {{lastName}}</h2>
    <!-- 通过methods函数拼接 -->
    <h2>{{getFullName()}}</h2>
    <!-- 通过conputed计算属性 -->
    <h2>{{fullName}}</h2>
  </div>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: '小明',
        lastName: '小红'
      },
      methods: {
        getFullName() {
          return this.firstName + ' ' + this.lastName
        }
      },
      computed: {
        fullName() {
          return this.firstName + ' ' + this.lastName
        }
      }
    })
  </script>

效果如下：

二、计算属性的复杂操作

代码如下：

<div id='app'>
    <h2>总价格：{{totalPrice}}</h2>
  </div>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        books: [
          { id: 110, name: 'unix', price: 119 },
          { id: 111, name: '代码大全', price: 105 },
          { id: 112, name: '深入理解计算机原理', price: 111 },
          { id: 113, name: '现在操作系统', price: 119 }
        ]
      },
      computed: {
        // filter/map/reduce
        totalPrice() {
          let result = 0
          for (let i = 0; i<this.books.length; i++) {
            return result += this.books[i].price
          }
        }
      }
    })
  </script>

效果如下：

三、计算属性的setter和getter

注意： 计算属性一般是没有set方法，为只读属性
代码如下：

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

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        firstName: '小明',
        lastName: '小红',
        
      },
      computed: {
        // 计算属性一般是没有set方法，为只读属性
        fullName: {
          set: function(newValue) {
            // console.log(newValue)
            const names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[1]
          },
          get: function() {
            return this.firstName + ' ' + this.lastName
          }
        }
        // fullName() {
        //   return this.firstName + ' ' + this.lastName
        // }
      }
    })
  </script>

效果如下：

四、计算属性和methods对比

同样情况下，优先使用computed，因为计算属性中有缓存，可以减少不必要的计算

1.计算属性

关闭计算属性中缓存：cache：false
代码如下：

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

    <!-- 2.通过methods函数 -->
    <!-- <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>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        firstName: '小明',
        lastName: '小红',
      },
      computed: {
        fullName() {
          console.log('computed')
          return this.firstName + ' ' + this.lastName
        }
      }
    })
  </script>

效果如下：
打印4次，但是执行一次computed

2.methods

代码如下：

<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> -->
  </div>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        firstName: '小明',
        lastName: '小红',
      },
      methods: {
        getFullName() {
          console.log('methods')
          return this.firstName + ' ' + this.lastName
        }
      }
    })
  </script>

效果如下：
打印4次，但是执行4次methods，消耗内存大
内容持续更新中…
lvan学习笔记-文章内容仅个人观点
2020.5.31