7 - Vue学习笔记 -计算属性、ES6 语法补充

计算属性

计算属性的基本使用

我们直到，在模板可以直接通过插值语法显示一些 data 里的数据
但是在某些情况下，我们可能需要对数据先进行转换后再显示，或者需要多个数据结合起来进行显示

• 比如我们有 firstName 和 lastName 两个变量，我们需要显示完整的名称
• 但是如果多个地方都要显示完整的名称，使用以前的方法就需要写多个 { {firstName}} { {lastName}}

因此，为了方便阅读
我们可以将上面的代码换成计算属性：

• 计算属性是写在实例的 computed 选项中的
• 另外我们会发现，虽然我们在 computed 里面定义的是一个方法，但是在调用时并没有显式得调用该方法，Vue 在这里面帮我们做了很多优化。因此，虽然在 methods 中也可以定义相同的方法，但是调用起来会更复杂，而且性能没有 computed 里的高， computed 里的只会调用一次，会有缓存数据，性能会提高。

 <div id="app">
 	<!-- 以前的方法 -->
	<h2>{
  {firstName + ' ' + lastName}}</h2>
	<h2>{
  {firstName}} {
  {lastName}}</h2>
	
	<h2>{
  {getFullName()}}</h2>
	
	<h2>{
  {fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
     
		el: "#app",
		data: {
     
			firstName: 'Lebron',
			lastName: 'James'
		},
		// computed: 计算属性() 命名最好以属性命名，不用加动词，比如 get..
		computed: {
     
			fullName: function () {
     
				return this.firstName + ' ' + this.lastName;
			}
		},
		methods: {
     
			getFullName() {
     
				return this.firstName + ' ' + this.lastName;
			}
		}
	});
</script>

再比如一个案例，我们有一些书，想要展示他们的价格和

data: {
   
	books: [
		{
   id: 110, name: "Unix编程艺术", price: 119},
		{
   id: 111, name: "代码大全", price: 105},
		{
   id: 112, name: "深入理解计算机原理", price: 90},
		{
   id: 113, name: "现在操作系统", price: 89},
	]
}
--- ... ---
computed: {
   
	totalPrice: function () {
   
		let result = 0;
		for (let i = 0; i < this.books.length; i++) {
   
			result += this.books[i].price;
		}
		return result;
	}
}

这样我们就可以通过 { {totalPrice}} 很方便简洁的得到了总价格

---

计算属性的 setter 和 getter

data: {
   
	firstName: 'Kobe',
	lastName: 'Bryant'
	},
computed: {
   
	// 这个方法是缩写的
	/*fullName: function () {
		return this.firstName + ' ' + this.lastName
	}*/
		
	// 属性,属性有 get 和 set 方法
	fullName: {
   
		set: function () {
   
			// 一般情况，计算属性不需要 set 方法，只读
			// 所以都