vue计算属性(computed)和侦听器(watch)

1.计算属性

1.1 什么是计算属性

（1）Vue的原有属性：data对象当中的属性就可以理解为Vue的原有属性
（2）计算属性：使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性

1.2 计算属性的作用

（1）代码得到了复用
（2）代码更加便于维护
（3）代码的执行效率高了（可以走缓存）

1.3 vue2 计算属性用法

（1）语法格式：vue对象中需要一个新的配置项computed

computed ：{
		// 这是一个计算属性
		计算属性1：{		
			// 当读取计算属性1的值的时候，getter方法被调用
 			get(){ 
			},
			// 当修改计算属性1的值的时候，setter方法被自动调用
			set(val){
			}
	  }
}

补充：get方法的调用时机包括两个
①第一个时机：第一次访问这个属性的时候
②第二个时机：该计算属性所关联的Vue原有属性的值发生变化时，get方法会被重新调用一次
③其他情况会走缓存
（2）代码示例：

 <div id="app">
 	<h1>{
  {msg}}</h1>
 	输入的信息：<input type="text" v-model="info"><br>
 	反转的信息：{
  {reversedInfo}} <br>
 </div>
 <script>
 	const vm =new Vue({
     
 	el: '#app',
 	data :{
     
 		msg :'计算属性-反转字符串案例',
 		info :''
 		  },
 	computed :{
     
 		reversedInfo:{
     
 			get(){
     
				console.log('getter 被调用了');
				return this.info.split('').reverse().join('')
				},
 			set(val){
      // val就是修改计算属性后的值
				console.