vue中Computed、Methods、Watch区别

1. methods

1.1 methods的介绍及其用法

Vue配置对象之一，常常用来做绑定事件的回调函数

 <div id="app">
        <h2>欢迎来到{{name}}</h2>
        <button v-on:click="showInfo">点我提示信息</button>
         <button v-on:click="showInfo2>点我提示信息</button>
        {{showInfo()}}
        {{showInfo()}}
        {{showInfo()}}
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: '#app',
            data:{
               name:'平顶山学院'
            },
            methods:{
                showInfo(){
                    console.log('同学你好');
                },
                showInfo2(event,number){
				console.log(event,number)
				// console.log(event.target.innerText)
				// console.log(this) //此处的this是vm
				alert('同学你好！！')
			}
            }
        })
    </script>
复制代码

特点: 可以放入函数，没有缓存，如果一进入页面调用，就会触发

注意:

• methods中配置的函数，不要用箭头函数！否则this就不是vm了；
• methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；

使用场景:

• 定义事件响应函数
• 定义组件公共处理函数

2.computed(计算属性）

2.1 computed的介绍和用法

• 1.定义：要用的属性不存在，要通过已有属性计算得来。

• 2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

• 3.get函数什么时候执行？

  (1).初次读取时会执行一次。

  (2).当依赖的数据发生改变时会被再次调用。

• 4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

• 5.备注：

  1.计算属性最终会出现在vm上，直接读取使用即可。

  2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	测试：<input type="text" v-model="x"> <br/><br/>
	全名：<span>{{fullName}}</span> <br/><br/>
	<!-- 全名：<span>{{fullName}}</span> <br/><br/>
	全名：<span>{{fullName}}</span> <br/><br/>
	全名：<span>{{fullName}}</span> -->
</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			methods: {
				demo(){
					
				}
			},
        computed:{
            fullName:{
                //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
               get(){
                    console.log('get被调用了')
				// console.log(this) //此处的this是vm
				return this.firstName + '-' + this.lastName
			},
		//set什么时候调用? 当fullName被修改时。
		set(value){
				console.log('set',value)
				const arr = value.split('-')
				this.firstName = arr[0]
				this.lastName = arr[1]
			}
		}
	}
})
</script>
复制代码

2.2 完整写法和简写写法

	computed:{
		//完整写法
		/* fullName:{
			get(){
				console.log('get被调用了')
				return this.firstName + '-' + this.lastName
			},
			set(value){
				console.log('set',value)
				const arr = value.split('-')
				this.firstName = arr[0]
				this.lastName = arr[1]
			}
		} */
		//简写
		fullName(){
			console.log('get被调用了')
			return this.firstName + '-' + this.lastName
		}
	}
复制代码

应用场景:购物车或者价格需要被计算出来

3.watch(侦听器）

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

2.监视的属性必须存在，才能进行监视！！

3.监视的两种写法：

(1).new Vue时传入watch配置

(2).通过vm.$watch监视
复制代码

3.1 监视属性的两种方式

    <div id="root">
  	<h2>今天天气很{{info}}</h2>
  	<button @click="changeWeather">切换天气</button>
    </div>
    </body>

  <script type="text/javascript">
  	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  	
  const vm = new Vue({
  	el:'#root',
  	data:{
  		isHot:true,
  	},
  computed:{
  	info(){
  		return this.isHot ? '炎热' : '凉爽'
  	}
  },
  methods: {
  	changeWeather(){
  		this.isHot = !this.isHot
  	}
  },
              /* watch:{
  		isHot:{
  		immediate:true, //初始化时让handler调用一下
  		//handler什么时候调用？当isHot发生改变时。
  		handler(newValue,oldValue){
  			console.log('isHot被修改了',newValue,oldValue)
  		}
  	}
  } */
})

  vm.$watch('isHot',{
  	immediate:true, //初始化时让handler调用一下
  	//handler什么时候调用？当isHot发生改变时。
  	handler(newValue,oldValue){
  		console.log('isHot被修改了',newValue,oldValue)
  	}
  })
复制代码

3.2 深度监听

深度监视:

(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
    
复制代码

备注：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
    
复制代码

data:{
   isHot:true,
   numbers:{
   	a:1,
   	b:1,
   	c:{
   		d:{
   			e:100
   		}
   	}
   }
},

numbers:{
   deep:true,
   handler(){
   	console.log('numbers改变了')
   }
}
复制代码

3.3 监听属性的简写

watch:{
   //正常写法
   isHot:{
   	// immediate:true, //初始化时让handler调用一下
   	// deep:true,//深度监视
   	handler(newValue,oldValue){
   		console.log('isHot被修改了',newValue,oldValue)
   	}
   }, 
   //简写
   isHot(newValue,oldValue){
   	console.log('isHot被修改了',newValue,oldValue,this)
   } 
}
复制代码

注意: 1.computed能完成的功能，watch都可以完成。 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

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

   <script type="text/javascript">
   	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

   	const vm = new Vue({
   		el:'#root',
   		data:{
   			firstName:'张',
   			lastName:'三',
   			fullName:'张-三'
   		},
   		watch:{
   			firstName(val){
   				setTimeout(()=>{
   					console.log(this)
   					this.fullName = val + '-' + this.lastName
   				},1000);
   			},
   			lastName(val){
   				this.fullName = this.firstName + '-' + val
   			}
   		}
   	})
   </script>