Vue中的watch属性

⚪.watch是一个监听属性，可以监听到值的变化，做出相应的反应。

图如下：将name属性和对话框绑定，并在对应页面绑定name值，然后在浏览器中测试，页面上数据会随着对话框中输入值的变化而变化。

1.监听一个变量，用watch属性可以监听到data中name属性的变化，watch中的name(监控处理函数)对应的是data中的name属性，其中的name有两个参数v1,v2，v1表示当前监听到的值，v2表示上一次监听到的值。

    <div id="app">
        用户名：<input type="text" v-model='name'>
        <p>你的名字是：{{name}}</p>
    </div>

    <!-- 引入vue -->
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
    
    const app=new Vue({
        el:'#app',
        data:{
            name:''
        },
        watch:{  //监控name属性
            name(v1,v2){
                //v1:当前数入的值
                //v2:上一次输入的值
                console.log(v1,v2)
            }
        }
    })
    </script>

2.用watch监听一个对象，想要监听到对象里面的属性，需要开启深度监听。监听一个对象的时候，需要指定两个属性，第一个deep：true是开启深度监听，不仅可以监听到person的变化，也可以监听到它的属性的变化，第二个handler是一个监控处理函数，其中也是两个参数，跟前面一致 。

    <div id="app">
        用户名：<input type="text" v-model='person.name'>
         <button @click='person.age++'>+</button>
        <p>你的名字是：{{person.name}}</p>
        <p>你的年龄是：{{person.age}}</p>
    </div>

    <!-- 引入vue -->
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
    
    const app=new Vue({
        el:'#app',
        data:{
            person:{
                name:'',
                age:18
            }
        },
        watch:{  //监控name属性
           person:{
               deep:true, //开启深度监听
               handler(v){
                   console.log(v.namge,v.age)
               }
           }
        }
    })
    </script>

 应用场景：一个数据影响多个数据。1.搜索框，2.全选/反选

与computed不同的是：computed是一个数据受多个数据影响。1.购物车价格