Vue中的浅监听,深度监听，同时监听多个属性_vue basic-container

（1）Vue中Watch深度监听某个对象:

           有个原则监听谁,写谁的名字,然后是对应的执行函数, 第一个参数为最新的改变值,第二个值为上一次改变的值,

           注意: 除了监听 data,也可以监听计算属性 或者一个 函数的计算结果

<template>
    <div class="user">
        <basic-container>
          <!-- 观察数据为字符串或数组-->
　　      <input v-model="userName"/>
　　      <input v-model="age"/>
　　      <!--当数据subjects为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数 -->
　　      <input v-model="subjects.score"/>
        </basic-container>
    </div>
</template>
 
<script>
    import {mapGetters} from "vuex";
    export default {
        name: "table_payorder",
        data() {
            return { 
                // 学生
                userName:'zhangsan',
                age:'30',
                subjects: { // 科目
                    courseName: '语文',
                    score : 50 // 分数
                }
 
            };
        },
        computed: {
            
        },
        watch: {
            // 监听姓名属性
           userName(newValue,oldValue){ // 监听那个属性,方法名为改属性
              console.info(oldValue+" 同学改名为："+newValue);
           },
           // 监听年龄变化
           age: 'changeAge', // 值可以为函数名称
           //注意：当监听的数据为对象或数组时，newValue和oldValue是相等的，因为这两个形参指向的是同一个最新的数据对象
           subjects:{
               handler(newValue,oldValue){
                  console.info(JSON.stringify(oldValue)+" 成绩发生变化："+JSON.stringify(newValue));
               },
               deep:true // deep 为true  意味着开启了深度监听 a对象里面任何数据变化都会触发handler函数,
           }
        },
        created() { 
           
        },
        methods: {
           // 这里书写说的方法
           changeAge(newValue,oldValue){
             console.info(oldValue+" 年龄为："+newValue);
           }
        }
    };
</script>

(2）深度监听对象的两种实现方式

  2.1字符串嵌套

<template>
 
    <div class="user">
 
        <basic-container>
 
          <!-- 观察数据为字符串或数组-->
 
　　      <input v-model="userName"/>
 
　　      <input v-model="age"/>
 
　　      <!--当数据subjects为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数 -->
 
　　      <input v-model="subjects.score"/>
 
          <input v-model="currentAddress.b.c.address"/>
 
 
 
        </basic-container>
 
    </div>
 
</template>
 
 
 
<script>
 
    import {mapGetters} from "vuex";
 
    export default {
 
        name: "table_payorder",
 
        data() {
 
            return { 
 
                // 学生
 
                userName:'zhangsan',
 
                age:'30',
 
                subjects: { // 科目
 
                    courseName: '语文',
 
                    score : 50 // 分数
 
                },
 
                currentAddress:{
 
                    b:{
 
                        c:{
 
                            address: '北京市'
 
                        }
 
                    }
 
                }
 
            };
 
        },
 
        computed: {
 
        },
 
        watch: {
 
            // 监听姓名属性
 
           userName(newValue,oldValue){ // 监听那个属性,方法名为改属性
 
              console.info(oldValue+" 同学改名为："+newValue);
 
           },
 
           // 监听年龄变化
 
           age: 'changeAge', // 值可以为函数名称
 
           //注意：当监听的数据为对象或数组时，newValue和oldValue是相等的，因为这两个形参指向的是同一个最新的数据对象
 
           subjects:{
 
               handler(newValue,oldValue){
 
                  console.info(JSON.stringify(oldValue)+" 成绩发生变化："+JSON.stringify(newValue));
 
               },
 
               deep:true // deep 为true  意味着开启了深度监听subjects对象里面任何数据变化都会触发handler函数,
 
           },
 
 
 
           // /想监听 address 此时 数据 是 currentAddress.b.c.address  比较深   深度监听
 
           // 用这种写法，就不要使用简写了(一定要用单引号或者双引号括起来)
 
           'currentAddress.b.c.address' : function(newValue,oldValue){
 
                 console.info(JSON.stringify(oldValue)+" 当前居住地变化："+JSON.stringify(newValue));
 
           }
 
        },
 
        created() {
 
        },
 
        methods: {
 
        }
 
    };
 
</script>

2.2 启用深度监听方式

 <template>
    <div class="user">
        <basic-container>
          <!-- 观察数据为字符串或数组-->
　　      <input v-model="userName"/>
　　      <input v-model="age"/>
　　      <!--当数据subjects为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数 -->
　　      <input v-model="subjects.score"/>
          <input v-model="currentAddress.b.c.address"/>
 
        </basic-container>
    </div>
</template>
 
<script>
 
    import {mapGetters} from "vuex";
 
    export default {
        name: "table_payorder",
        data() {
            return { 
                // 学生
                userName:'zhangsan',
                age:'30',
                subjects: { // 科目
                    courseName: '语文',
                    score : 50 // 分数
                },
                currentAddress:{
                    b:{
                        c:{
                            address: '北京市'
                        }
                    }
                }
 
            };
        },
        computed: {
            
        },
        watch: {
            // 监听姓名属性
           userName(newValue,oldValue){ // 监听那个属性,方法名为改属性
              console.info(oldValue+" 同学改名为："+newValue);
           },
           // 监听年龄变化
           age: 'changeAge', // 值可以为函数名称
           //注意：当监听的数据为对象或数组时，newValue和oldValue是相等的，因为这两个形参指向的是同一个最新的数据对象
           subjects:{
               handler(newValue,oldValue){
                  console.info(JSON.stringify(oldValue)+" 成绩发生变化："+JSON.stringify(newValue));
               },
               deep:true // deep 为true  意味着开启了深度监听 a对象里面任何数据变化都会触发handler函数,
           },
 
 
           // /想监听 address 此时 数据 是 currentAddress.b.c.address  比较深   深度监听
           // 用这种写法，就不要使用简写了(一定要用单引号或者双引号括起来)
           /**'currentAddress.b.c.address' : function(newValue,oldValue){
                 console.info(JSON.stringify(oldValue)+" 当前居住地变化："+JSON.stringify(newValue));
           }**/
           currentAddress:{
               deep: true,
               handler(newValue,oldValue){
                  console.info(JSON.stringify(oldValue)+" 成绩发生变化："+JSON.stringify(newValue));
               },
           }
        },
        created() { 
           
        },
        methods: {
           // 这里书写说的方法
           changeAge(newValue,oldValue){
             console.info(oldValue+" 年龄为："+newValue);
           }
        }
    };
</script>