计算属性

计算属性基本用法

如果表达式过长，或逻辑复杂时，代码就会变得臃肿甚至难以阅读和维护，在遇到复杂的逻辑时应该使用计算属性。
看个小例子，也可以直接点击这里

  <div id="app">
    改变之前： {{ text }}  <br>
    文本插值里直接进行改变： {{ text.split(',').reverse().join()}}  <br>
    利用计算属性进行改变： {{textCopy }}
  </div>

  <script>
    let app = new Vue({
      el: '#app',
      data: {
        text: '123,456,789'
      },
      computed: {
        textCopy: function() {
          return this.text.split(',').reverse().join()
        }
      }
    })
    
  </script>

结果如下：

image.png

除了上例简单的用法，计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
再来个 demo:
计算多个购物车总金额
最初看到的是这样的：

image.png

在控制台改下某件商品的单价

cart2.shop2[0].price = 500

数据变化后，页面也跟着更新了

image.png

计算属性使用小技巧

• 计算属性可以依赖其他计算属性
• 计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据

getter和setter

每一个计算属性都包含－个 getter 和一个 setter，上面的例子都是计算属性的默认用法 ， 只是利用了 getter来读取。

<div id="app">
    你好呀，我叫 {{myName}}
  </div>
  
  <script>
  let app = new Vue({
    el: '#app',
    data: {
      name: 'xxx'
    },
    computed: {
      myName: {
        // getter
        get: function(){
         return this.name
        },
        // setter
        set: function(val){
          return this.name = val
        }
      }
    }
  })
  </script>

此时页面显示的是 ：“你好呀，我叫 xxx ”
在控制台输入 app.name = 'abc' ，页面变成了 “你好呀，我叫 abc”

computed VS methods

调用 methods 里的方法也可以与计算属性起到同样的作用。
计算属性和方法的区别在于 计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
这就意味着只要 计算属性依赖的数据未发生变化（不管页面是否重新渲染），多次访问相应的计算属性会立即返回之前的计算结果，而不必再次执行函数。

而对于方法而言，每当触发重新渲染时，调用方法将总会再次执行函数。

 <div id="app">
    <p>这是用来测试的test：
      <span style="color: red;">{{test}}</span>
    </p>
    <p>在控制台输入 “app.test = '任何你想输的内容'”，看看下面两个时间的变化 </p>
    <p>这是通过计算属性拿到的时间： {{ now }} </p>
    <p> 这是通过方法拿到的时间： {{ time() }} </p>
  </div>

  <script>
    let app = new Vue({
      el: '#app',
      data: {
        test: '1'
      },
      computed: {
        now: function () {
          return Date.now()
        }
      },
      methods: {
        time: function () {
          return Date.now()
        }
      }
    })
  </script>

当在控制台输入 app.test = 'abc' 时，可以看到计算属性拿到的时间没有改变而通过方法拿到的时间改变了

使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
简单来说，他们的区别如下：

• 调用方式不一样，computed定义的成员像属性一样访问，methods定义的成员必须以函数形式调用。
• computed是带缓存，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行。

computed VS watch

点击这里

  <div id="app">
    <p>computed: {{ fullname1 }}</p>
    <p>watch: {{fullName }}</p>
  </div>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        firstName: 'san ',
        lastName: 'zhang',
        fullName: 'san zhang'
      },
      computed: {
        fullname1: function(){
          return this.firstName + this.lastName
        }
      },
      watch: {
        firstName: function(){
         this.fullName = this.firstName + this.lastName
        },
        lastName: function(){
         this.fullName = this.firstName + this.lastName
        }
      }
    })
  </script>

computed 不能执行异步任务，计算属性必须同步执行，中间不能访问服务器或者执行异步任务。
如果需要执行异步任务，可以使用watch。