Vue中computed属性的使用方法

<p>
  </p><h1>{{ message.split('').reverse().join('') }}</h1>

data () {
  return {
    results: [
      {
        name: 'English',
        marks: 70
      },
      {
        name: 'Math',
        marks: 80
      },
      {
        name: 'History',
        marks: 90
      }
    ]
  }
}

computed: {
  totalMarks: function () {
    let total = 0
    let me = this
    for (let i = 0; i <p style="text-align: left;">
	totalMarks 计算属笥使用数组 resultes 的 marks 计算出总值。它只是循环遍历值并返回子总数。</p><p style="text-align: left;">
	然后，我们可以在视图中显示计算值：</p><pre class="brush:php;toolbar:false"><p>
  </p><p>
    <input>
    <span>Marks for {{ subject.name }}: {{ subject.marks }}</span>
  </p>
  <p>
    Total marks are: {{ totalMarks }}
  </p>

let app = new Vue({
 el: '#app',
 data () {
  return {
   results: [
    {
     name: '英语',
     marks: 70
    },
    {
     name: '数学',
     marks: 80
    },
    {
     name: '历史',
     marks: 90
    }
   ]
  }
 },
 methods: {
  totalMarks: function () {
   let total = 0
   let me = this
   for (let i = 0; i <p style="text-align:left;">
	虽然这两种方式输出的结果是相同的，但是性能将遭受毁灭性的打击。使用这种方法， totalMarks() 方法在每次页面渲染时都被执行一次（例如，使用每一个 change ）。</p><p style="text-align: left;">
	如果我们有一个计算属性，那么Vue会记住计算的属性所依赖的值（在我们这个示例中，那就是 results 
）。通过这样做，Vue只有在依赖变化时才可以计算值。否则，将返回以前缓存的值。这也意味着 只要 results 还没有发生改变，多次访问 
totalMarks 计算属性会立即返回之前的计算结果，而不必再次执行函数。</p><p style="text-align: left;">
	上面两个示例也说明，在Vue中 计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。</p><p style="text-align: left;">
	这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：</p><pre class="brush:php;toolbar:false">computed: {
  now: function () {
    return Date.now()
  }
}

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

<p>
  {{ fullName }}
</p>
let app = new Vue({
  el: '#app',
  data () {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    }
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

let app = new Vue({
  el: '#app',
  data () {
    return {
      firstName: 'Foo',
      lastName: 'Bar'
    }
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

# Yarn
$ yarn add vue-async-computed
# NPM
$ npm i vue-async-computed --save

// main.js
import Vue from 'vue';
import AsyncComputed from 'vue-async-computed'
import App from 'App.vue';
Vue.use(AsyncComputed);
new Vue({
  el: '#app',
  render: h => h(App)
});

<!-- MyComponent.vue -->
<template>
  <!-- 在一两秒后 myResolvedValue将变成"*Fancy* Resolved Value" -->
  <h2>Asynchronous Property {{ myResolvedValue }}</h2>
</template><script>
  export default {
    asyncComputed: {
      myResolvedValue () {
        return new Promise((resolve, reject) => {
          setTimeout(() => resolve(&#39;*Fancy* Resolved Value!&#39;), 1000)
        })
      }
    }
  }
</script>

<!-- MyComponent.vue -->
<template>
  <!-- 在一两秒后 myResolvedValue将变成"*Fancy* Resolved Value" -->
  <h2>Asynchronous Property {{ myResolvedValue }}</h2>
</template><script>
  function fancinessComesLater () {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(&#39;*Fancy* Resolved Value!&#39;), 1000)
    })
  }
  export default {
    asyncComputed: {
      async myResolvedValue() {
        return await fancinessComesLater()
      }
    }
  }
</script>