Vue 计算属性

1. 计算属性的基本使用
计算属性虽然书写时是方法的形式，但是本质是属性，所以起名时按照属性的起名规则，应为名词

data(){
	firstName:'aaa',
	lastName:'bbb'
}
<h2>{{fullName}}</h2

          {
            id: 4,
            name: '现代操作系统',
            price: 90
          }
        ]
      },
computed:{
	totalPrice(){
		let result=0;
		for(var i=0;i<this.books.length;i++){
			result+=this.books[i].price
		}
		return result
	}
<h2>总价格：{{totalPrice}}</h2>

2. 计算属性的setter和getter
methods和computed的区别：methods不会进行缓存，如果多次使用会调用多次。计算属性会进行缓存，如果多次使用，计算属性只会调用一次

methods和computed的核心区别：

methods是函数调用，computed是属性调用
computed有缓存功能，methods没有
computed定义的方法是以属性访问的形式调用的，methods定义的方法是以函数访问的形式调用的
computed是基于响应式依赖进行缓存的，只有响应式依赖发生改变时，才会重新求值
对于任何复杂逻辑，都应当使用计算属性

<div id="app">
    {{ fullName }}                      // 3、渲染 fullName
</div>

var app = new Vue({
  el: '#app',
  data: {                               // 1、在data中定义 firstName 和 lastName
    firstName: 'Barry',
    lastName: 'Dong'
  },
  computed: {                          // 2、在计算属性中定义 fullName
    fullName: function () {
      return this.firstName + this.lastName
    }
  }
})

3、计算属性的缓存

这里要结合 methods 来对比学习。

methods：只要页面重新渲染，methods 中的方法就会重新执行；不渲染，就不执行。

如：

<div id="app">
    {{ text }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    text: '星星点灯',          // text 在页面中渲染
    message: '照亮我的前程'    // message 未在页面中渲染
  },
  computed: {
    ...
  },
  methods: {
    ...
  }
})

如果通过 app.text 改变了 text 的值，那么页面就会重新渲染出 text 的值，methods 中的方法也会重新执行。而如果改变的是 message ，因为 message 未在页面中渲染，那么页面就不会重新渲染 message 的值，methods 中的方法不会重新执行。