Vue.js从入门到实践学习笔记（四）——监听器

Vue提供一种更通用的方式来观察和响应Vue实例上的数据变动：监听属性。
当有一些数据需要随着其他数据变化而变化时，就可以使用监听器。
监听器实质也是函数，函数名和data中的数据名要对应。

1、使用监听器

监听器在watch中定义，下例使用监听器来实现千米和米的换算：

	<div id="app">
        千米：<input type="text" v-model="kilometers">
        米：<input type="text" v-model="meters">
    </div>
    <p id="info"></p>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm=new Vue({
    
    
            el:'#app',
            data:{
    
    
                meters:0,
                kilometers:0
            },
            watch:{
    
    
                kilometers:function(val){
    
    
                    this.meters=val*1000
                },
                meters:function(val, oldVal){
    
    
                    this.kilometers=val/1000;
                }
            }
        })
        //监听器实现方式
        //第一种：直接在watch中定义监听器
        //第二种：Vue实例的watch方法:
        vm.$watch("kilometers", function(val, oldVal){
    
    
        	let info="修改前的值："+oldVal+"，修改后的值："+val;
        	document.getElementById("info").innerHTML=info;
    </script>

当需要在数据变化时执行异步或开销较大的操作时，使用监听器是最合适的。

2、监听器的更多形式

监听器在定义时，可以直接写一个函数，还可以接一个方法名。

<div id = "app">
   年龄: <input type = "text" v-model="age">
   <p v-if="info">{
    
    {
    
    info}}</p>
</div>

<script src="vue.js"></script>
<script>
	var vm = new Vue({
    
    
    el: '#app',
    data: {
    
    
      age: 0,
      info: ''
    },
    methods: {
    
    
    	checkAge(){
    
    
    		if(this.age >= 18)
    			this.info = '已成年';
    		else
    			this.info = '未成年';
    		
    	}
    },
    watch : {
    
    
    	age: 'checkAge'
    }
  });
</script>

还可以监听一个对象的属性变化。

<div id = "app">
   年龄: <input type = "text" v-model="person.age">
   <p v-if="info">{
    
    {
    
    info}}</p>
</div>

<script src="vue.js"></script>
<script>
	var vm = new Vue({
    
    
    el: '#app',
    data: {
    
    
      person: {
    
    
      	name: 'lisi',
      	age: 0
      },
      info: ''
    },
    watch : {
    
    
    	// 该回调会在person对象的属性改变时被调用，无论该属性被嵌套多深
    	person: {
    
    
    		handler: function(val, oldVal){
    
    
	    		if(val.age >= 18)
	    			this.info = '已成年';
	    		else
	    			this.info = '未成年';
    		},
    		deep: true,
    		immediate: true
    	}
    }
  });
</script>

handler用于定义当数据变化时调用的监听器函数，deep在监听对象属性变化时使用，true表示无论该对象的属性在对象中的层级有多深，只要该属性的值发生变化，都会被监测到。

监听器函数在初始渲染时不会调用，只有后续监听的属性发生变化时才会被调用。如果要让监听器函数在监听开始后立即执行，可以使用immediate选项，将值设为true。

监听器与计算属性的区别：监听器不需要返回新的数据，不能被当做数据属性使用。当需要在数据变化时执行异步或开销较大的操作时，使用监听器是最合适的。