5.监听器

1.vue提供了一种更通用的方式来观察和响应vue实例上的数据变动:监听属性。当你有一些数据需要随着其他数据变化而变化时，就可以使用监听器。（它主要用于监测Vue实例的数据变动，并依据该数据变动做出响应，如更新另一数据，或者发起异步请求从服务端请求数据，和计算属性的区别就是，监听器不需要返回新的数据，不能被当做数据属性使用，当需要在数据变化时执行异步或者开销较大的操作时，使用监听器时最合适的）
2.不要使用箭头函数来定义监听器函数，因为箭头函数绑定的是父级作用域的上下文。
3.监听器在定义时，除了直接写一个函数外，还可以接一个方法名。
4.监听器还可以监听一个对象的属性变化
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>监听器</title>
</head>
<body>
<!--
   监听器时在vue实例的选项对象的watch选项中定义的。
-->
<div id="app">
    千米:<input type="text" v-model="kilometers">
    米:<input type="text" v-model="meters">
</div>
<script>

    var vm = new Vue({
       el:'#app',
        data:{
            kilometers:0,
            meters:0
        },
        watch:{
           kilometers: function(val){
               this.meters = val *1000;
           },
            //监听器函数也可以接受两个参数，val是当前值，oldVal是改变之前的值
            meters: function(val,oldVal){
               this.kilometers = val/1000;
                console.log(oldVal);
            }
        }
    });
</script>
</body>
</html>


监听对象属性：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>监听器-监听对象属性</title>
</head>
<body>
<!--
   在监听对象属性改变时，使用了两个新的选项:handler和deep，前者用于定义当前数据变化时调用的监听器函数，后者
   主要在监听对象属性变化时使用，该选项的值为true，表示无论该对象的属性在对象中的层级有多深，只要该属性的值发生变化
   
-->
<div id="app">
    年龄：<input type="text" v-model="person.age">
     <p v-if="info">{{info}}</p>
</div>
<script>

    var vm = new Vue({
       el:'#app',
        data:{
           person:{
            name:'lisi',
            age:0
           },
            info:''
        },
        watch:{
           person:{
               handler:function(val,oldVal){
               if (val.age>=18){
                   this.info = '已成年'
               }else{
                   this.info = '未成年'
               }
           },
               deep: true
           },
            //监听器函数也可以接受两个参数，val是当前值，oldVal是改变之前的值
            meters: function(val,oldVal){
               this.kilometers = val/1000;
                console.log(oldVal);
            }
        }
    });
</script>
</body>
</html>


监听属性调用方法：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>监听器-监听属性调用方法</title>
</head>
<body>
<!--

-->
<div id="app">
    年龄：<input type="text" v-model="age">
    <p v-if="info">{{info}}</p>
</div>
<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>
</body>
</html>