第4集丨Vue 江湖 —— 计算属性

计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。

一、基本使用

1.1 在computed中定义

下面案例，在computed中定义了一个计算属性，名为：fullName，其所依赖的属性为：firstName 和 lastName。

并且定义了getter,如果getter被调用，会打印出：get被调用了!

1.1.1 案例

<div id="root">
   	<div class="row">姓：<input type="text" v-model="firstName"></div>
    <div class="row">名：<input type="text" v-model="lastName"></div>
</div>
<script>
	const vm = new Vue({
	    el:'#root',
	    data:{
	        firstName: '小',
	        lastName: '三'
	    },
	    computed:{
	        fullName:{
	            get() {
	                console.log('get被调用了!');
	                // console.log(this);
	                return this.firstName+'-'+this.lastName
	            }
	        }
	    }
	    
	});
	</script>

1.1.2 控制台调用getter

打开控制台，输入vm 回车，会发现计算属性fullName已经在vm实例上了。并且会发现此时该属性的值，看不到，有三个点...，点击才能看到，也就是getter被调用了。

1.1.3 控制台中的data和computed

打开控制台，我们可以很方便的看到data和computed的属性

1.2 缓存效果

下面案例中，get只会被调用一次，其余的会从缓存中读取。控制台只会打印出一次get被调用了!

<div id="root">
   	<div class="row">姓：<input type="text" v-model="firstName"></div>
    <div class="row">名：<input type="text" v-model="lastName"></div>
    <div class="row">全名：<span>{{fullName}}</span></div>
    <div class="row">全名：<span>{{fullName}}</span></div>
    <div class="row">全名：<span>{{fullName}}</span></div>
    <div class="row">全名：<span>{{fullName}}</span></div>
</div>
<script>
	const vm = new Vue({
	    el:'#root',
	    data:{
	        firstName: '小',
	        lastName: '三'
	    },
	    computed:{
	        fullName:{
	            get() {
	                console.log('get被调用了!');
	                // console.log(this);
	                return this.firstName+'-'+this.lastName
	            }
	        }
	    }
	    
	});
	</script>

1.3 完整写法

• 增加了setter的定义
• 通过控制台修改计算属性fullName此时会看到setter被调用了，并修改了所依赖的属性firstName和lastName 。对于Vue来讲，data中的任何一个数据发生变化的时候，Vue的模板都会重新解析一遍。因此，由于这两个属性发生了变化，其对应getter就会被调用。

1.3.1 案例

<div id="root">
   	<div class="row">姓：<input type="text" v-model="firstName"></div>
    <div class="row">名：<input type="text" v-model="lastName"></div>
    <div class="row">全名：<span>{{fullName}}</span></div>
    <div class="row">全名：<span>{{fullName}}</span></div>
    <div class="row">全名：<span>{{fullName}}</span></div>
    <div class="row">全名：<span>{{fullName}}</span></div>
</div>
<script>
	const vm = new Vue({
		el:'#root',
		data:{
			firstName: '小',
			lastName: '三'
		},
		computed:{
			fullName:{
				get() {
					console.log('get被调用了!');
					// console.log(this);
					return this.firstName+'-'+this.lastName
				},
				set(value) {
					console.log('set',value);
					const arr = value.split("-");
					this.firstName = arr[0];
					this.lastName = arr[1];
				}
			}
		}
		
	});
</script>

1.3.2 效果图

我们在控制台中，输入vm.fullName='李-四' 回车，就会看到如下效果。

1.4 简写形式

计算属性 一般不做修改。如果只读不改，计算属性就可以写成简写的形式。这时不再是一个对象了，而是用函数代替且就为get函数。

<div id="root">
	<div class="row">姓：<input type="text" v-model="firstName"></div>
	<div class="row">名：<input type="text" v-model="lastName"></div>
	<div class="row">全名：<span>{{fullName}}</span></div>
</div>

<script>
	const vm = new Vue({
		el:'#root',
		data:{
			firstName: '小',
			lastName: '三'
		},
		computed:{
			fullName() {
				console.log('get被调用了!');
				return this.firstName+'-'+this.lastName
			}
		}
		
	});
</script>

二、案例的其他实现

2.1 methods实现

在methods中定义了fullName函数来实现

<div id="root">
	<div class="row">姓：<input type="text" v-model="firstName"></div>
	<div class="row">名：<input type="text" v-model="lastName"></div>
	<div class="row">全名：<span>{{fullName()}}</span></div>
</div>

<script>
	const vm = new Vue({
		el:'#root',
		data() {
			// data中的任何一个数据发生变化的时候，Vue的模板都会重新解析一遍
			return {
				firstName: '小',
				lastName: '三'
			};
		},
		methods:{
			fullName(){
				// this就是vm实例
				// console.log(this);
				console.log("fullName函数被调用了！");
				return this.firstName+"-"+this.lastName;
			}
		}
	});
</script>

2.2 插值语法实现

通过直接在Vue模板里拼接来实现

<div id="root">
	<div class="row">姓：<input type="text" v-model="firstName"></div>
	<div class="row">名：<input type="text" v-model="lastName"></div>
	<div class="row">全名：<span>{{firstName}}-{{lastName}}</span></div>
</div>

<script>
	const vm = new Vue({
		el:'#root',
		data() {
			return {
				firstName: '小',
				lastName: '三'
			};
		},
	});
</script>

三、体会计算属性的好处

3.1 复杂任务时

如下代码是反转字符串的例子，这个时候，模板变的很复杂，不容易看懂和理解。

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

3.2 使用计算属性

对于上述问题，我们使用计算属性来解决。

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

3.3 computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

四、计算属性汇总

1. 概念：所谓计算属性，就是要用的属性不存在，要通过已有的属性加工、计算生成一个全新的属性。对于Vue来说，data中配置的就是属性。计算属性与data中定义的属性分开。
2. 原理：底层借助了Object.defineProperty()方法提供的getter和setter。
3. get函数的作用
   a. 当有程序读取计算属性时，get就会被调用，且返回值就作为计算属性的值。即计算属性是实时计算的属性。
   b. Vue做了缓存，当所依赖的数据没有发生变化，读取的时候会从缓存中取值。不会调用get
   c. Vue已经将get中this维护好了，就是vm实例
4. get函数什么时候执行？
   a. 初次读取时会执行一次
   b. 当依赖的数据发生变化时，会被再次调用
5. set函数什么时候调用？
   a. 当计算属性被修改时被调用
6. 优势：与methods实现相比，内部有缓存机制，效率更高，调试方便。
7. 注意点
   a. 计算属性最终会出现在vm上，直接读取使用即可。
   b. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
   c. 计算属性一般不做修改。这个时候，只读不改可以有简写的形式，不再是一个对象了，而是用函数代替且就为get函数。