vue基础之计算属性computed

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

简写

<div id="app">
    <h2>第一种方法拼接字符串---{{lastName + ' ' + firstName}}</h2>
    <h2>第二种拼接字符串---{{lastName}} {{firstName}}</h2>
    <h2>用函数方法去处理数据并获取---{{getFulllName()}}</h2>
    <h2>用计算属性computed获取数据---{{fullName}}</h2>
    <br>
	//计算属性处理数据
    <h2>卖东西的总价：{{totalPrice}}</h2>
  </div>
  <script>
  	const app = new Vue({
  		el: '#app',
  		data: {
  			firstName: '布朗',
  			lastName: '科比',
	        saleData: [
	          {
	          	id: 1,
	          	name: '篮球',
	            price: 200
	          },{
			        id: 2,
			        name: '足球',
			        price: 150
		        },{
			        id: 3,
			        name: '排球',
			        price: 60
		        },
	        ]
  		},
      //computed计算属性，命名时直接按照属性名命名。
      	computed: {
	      	fullName: function () {
		      return this.lastName + ' ' + this.firstName;
	      },
       		totalPrice: function () {
        	//用的最简单的for循环处理数据，当然es6还有很多，比如filter、map、reduce等，以后再对这些方法加强练习。
		      	let res = 0;
		        for (let i = 0; i < this.saleData.length; i++) {
			        res += this.saleData[i].price;
		        }
		        return res;
	       	}
	      },
		methods: {
			getFulllName: function () {
				return this.lastName + ' ' + this.firstName;
			}
		}
  	})
  </script>

上面是计算属性的简写，其实计算属性本身有get，set方法，一般默认使用get方法：

<div id="app">
    <h2>用计算属性computed获取数据---{{fullName}}</h2>
  </div>
  <script>
  	const app = new Vue({
  		el: '#app',
  		data: {
  			firstName: '布朗',
  			lastName: '科比'
  		},
      //computed计算属性，命名时直接按照属性名命名。
      	computed: {
		      	otherFullName: {
		      	// 计算属性一般不会用set方法，只读属性
			      set: function (newValue) {
	            		this.firstName = newValue;
				     	this.lastName = newValue;
				   },
		          get: function () {
			          return this.lastName + ' ' + this.firstName;
		          }
	       	 }
	      }
  	})
  </script>

官方对计算属性的结果还有个解释需要注意：

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

示例：

<div id="app">
    <!--1.直接拼接字符串，语法过于频繁-->
    <h2>{{lastName + ' ' + firstName}}</h2>

    <!--2.通过定义methods-->
    <h2>{{getFulllName()}}</h2>
    <h2>{{getFulllName()}}</h2>
    <h2>{{getFulllName()}}</h2>

    <!--3.通过计算属性computed-->
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
  </div>
  <script>
  	const app = new Vue({
  		el: '#app',
  		data: {
  			firstName: '布朗',
  			lastName: '科比'
  		},
      	computed: {
		      	fullName: function () {
			      	console.log('fullName');
				      return this.lastName + ' ' + this.firstName;
			      }
	      },
	      methods: {
  			getFulllName: function () {
				  console.log('getFulllName');
  				return this.lastName + ' ' + this.firstName;
	  			}
	  		}
  	})

通过多次调用methods中的getFulllName方法和computed中的fullName属性对标打印的次数，methods每次调用都打印了一次，而computed只有第一次调用才打印，得出结论，这种单纯的需要多次调用的数据，使用计算属性获取数据，性能会更高一些，因为计算属性的结果会被缓存。

这是我的理解，如果有不对的地方，请各位大佬指导纠正一下！