数据侦听器 |监听器 watch

1. 普通侦听数据

根据属性的名称，定义一个方法，用于侦听该属性的变化。
当属性的值发生变化时，该方法就会执行。
这个方法，有两个参数，第一个参数是最新值，第二参数是旧值。

   <div id="app">
        <p>姓名：<input type="text" v-model="name"></p>
        <p>年龄：<input type="text" v-model="age">{{MyAge}}</p>
    </div>‘

  <script>
        new Vue({
            el:'#app',
            data:{
                name:'张三',
                age:20
            },
            //数据侦听器
            watch:{
                name(nval,oval){
                    //比如：当name属性值发生变化时，重新发送ajax请求获取新的数据
                    console.log(nval,oval);
                },
                age(nval,oval){
                    console.log(nval,oval);
                },
            },    
        })
    </script>

2. 侦听对象，需要开启深度监视

如果要实现深度侦听对象的变化（也就是对象具体属性的变化），就需要使用完整的写法，定义一个对象。
deep 属性开启深度监视，值为true 或false
immediate 属性设定页面加载完成时，先运行一次，值为true 或false
（注意：这种情况下，旧值是undefined）
handler 定义监视的函数
注意：开启深度监视后，旧值已经没有意义，因为对象是引用类型，对象的属性值已经改了，就没有旧的属性值。

   <div id="app">
        <p>姓名：<input type="text" v-model="name"></p>
        <p>年龄：<input type="text" v-model="age">{{MyAge}}</p>
        <hr>

        <h2>学生信息</h2>
        <button @click="resetStudent">修改学生对象</button>
        <p>姓名：<input v-model="student.name" ></p>
        <p>年龄：<input v-model="student.age" ></p>
        <p>性别：<input v-model="student.sex" ></p>
    </div>

 <script>
        new Vue({
            el:'#app',
            data:{
                name:'张三',
                age:20,
                student:{
                    name:'李四',
                    age:20,
                    sex:'女'
                }
            },
            methods: {
                resetStudent(){
                    this.student = {
                        name:'王五',
                        age:22,
                        sex:'男'
                    }
                }
            },
            //数据侦听器
            watch:{
                name(nval,oval){
                    console.log(nval,oval);
                },
                student(nval,oval){
                    console.log(nval,oval);
                },
                // 侦听对象，需要开启深度监视
                student:{
                    deep:true,
                    immediate:true,
                    handler(nval,oval){
                        console.log(nval,oval);
                    }
                }
            },
            //计算属性，也有监视的能力
            computed:{
                MyAge(){
                    // 当前计算机属性里面用到数据发生变化时，会重新执行计算属性
                    // 只是计算属性必须要在模板中使用
                    console.log(this.age);
                    return this.age
                }
            }
        })
    </script>

3. 计算属性，也有监视的能力

当前计算机属性里面用到数据发生变化时，会重新执行计算属性，
只是计算属性必须要在模板中使用（方法要在页面中用一下）

 <div id="app">
        <p>姓名：<input type="text" v-model="name"></p>
        <p>年龄：<input type="text" v-model="age">{{MyAge}}</p>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                name:'张三',
                age:20
            },
            //计算属性，也有监视的能力
            computed:{
                MyAge(){
                    // 当前计算机属性里面用到数据发生变化时，会重新执行计算属性
                    // 只是计算属性必须要在模板中使用
                    console.log(this.age);
                    return this.age
                }
            }
        })
    </script>

四、过滤器

1. 局部过滤器

局部过滤器（Vue实例内部定义的过滤器），只有当前Vue实例可以访问。在filters中定义过滤器。

<div id="app">
<p>商品名称：{{goods.name}}</p>
<p>商品价格：{{goods.price | toFixed2}}</p>
<!-- 通过管道符| 调用过滤器，其实就是调用那个方法，将值传进去，再返回新的值 -->
<p>商品价格(人民币)：{{goods.price | toFixed2 | toRMB}}
  <input type="text" :value="goods.price | toFixed2">
 </p>
   <!-- 过滤器可以链式调用，就是之前已经过滤完成的结果，继续传给下一个过滤器，注意顺序 -->
  <p>商品价格(美元)：{{goods.price | toFixed2 | toUS}}</p>
    </div>

new Vue({
            el:'#app',
            data:{
                goods:{
                    name:'小米手机',
                    price:1999.22222
                }
            },
            // 定义过滤器
            filters:{
                // 过滤在模板中通过管道符 | 的方式来调用 
                toFixed2(val){
                    return val.toFixed(2)
                },
                //返回人民币数据
                toRMB(val){
                    return '￥'+ val
                },
                //返回美元数据
                toUS(val){
                    return '/article>+ (val/6.5).toFixed(2)
                }
            }
        })

2. 全局过滤器

在创建 Vue 实例之前定义的全局过滤器，所有的Vue实例都可以访问。

    <!-- app 和 app2容器都可以使用全局过滤器toFixed2、toRMB -->
    <div id="app">
        <p>商品名称：{{goods.name}}</p>
        <p>商品价格：{{goods.price | toFixed2 | toRMB}}</p>
    </div>
    <div id="app2">
        <p>商品名称：{{goods.name}}</p>
        <p>商品价格：{{goods.price | toFixed2 | toRMB}}</p>
    </div>

   Vue.filter("toFixed2", function (val) {
      return val.toFixed(2);
   });
   Vue.filter('toRMB', function(val){
      return '￥'+ val
   })
   new Vue({
       el:'#app',
       data:{
           goods:{
               name:'小米手机',
               price:1999.22222
           }
       }
   })
   new Vue({
       el:'#app2',
       data:{
           goods:{
               name:'华为手机',
               price:2999.33333
           }
       }
   })