vue watch的用法

作用：它可以用来监测Vue实例上的数据变动（三种用法）

简单的监听:可以来监听属性的变化

代码演示：

<body>
    <div id="app">
        <button @click = 'handelClick'>{{msg}}</button>
    </div>
</body>
<script>
    let vm = new Vue({
         // 监听器
        watch:{
            // 监听 msg 属性的数据变化
    		// 作用 : 只要 msg 的值发生变化,这个方法就会被调用
    		// 第一个参数 : 新值
    		// 第二个参数 : 旧值,之前的值
            msg:function(newVal,oldVal){
                console.log('内容改变,保存数据到本地或发送请求！');
                console.log(oldVal)
            }
        },
        el:'#app',
        data:{
            msg:'旧内容'
        },
        methods:{
            handelClick:function(){
                this.msg = '新内容'
            }
        }
    })
</script>

点击前：
在这里插入图片描述
点击后：

immediate（立即处理进入页面就触发）

代码演示：

<body>
    <div id="app">
        <input type="text" v-model="num">
        <button @click ='changeNum'>num++</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods:{
                changeNum:function(){
                    this.num++
                }
            },
            watch: {
                num: {
                    // 数据发生变化就会调用这个函数  
                    handler(newVal, oldVal) {
                        console.log('oldVal:', oldVal)
                        console.log('newVal:', newVal)
                    },
                    // 立即处理 进入页面就触发
                    immediate: true
                }
            }
        })
    </script>
    </body>

在这里插入图片描述

deep（深度监听）
对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true

代码演示：

<body>
    <div id="app">
        <input type="text" v-model="childrens.name" />
        <input type="text" v-model="lastName" />
      </div>
      
      <script type="text/javascript">
        var vm = new Vue( {
          el: '#app',
          data: {
            childrens: {
              name: 'pyq',
              age: 18,
              sex: '男'
            },
            tdArray:["1","2"],
            lastName:"dzh"
          },
          watch:{
            childrens:{
            // 每个属性值发生变化就会调用这个函数
              handler:function(newval,oldval){
                console.log('对象属性改变了！')  
              },
              deep:true//对象内部的属性监听，也叫深度监听 可监听到对象、数组的变化
            },
            'childrens.name':function(newval,oldval){
              console.log(newval,oldval)
            },//键路径必须加上引号
            lastName:function(val,oldval){
              console.log(this.lastName)
            }
          },//以V-model绑定数据时使用的数据变化监测
          
        } );
        vm.$watch("lastName",function(){
          console.log('lastName变化了')
        })//主动调用$watch方法来进行数据监测

      </script>
</body>

效果：
在这里插入图片描述

作用：它可以用来监测Vue实例上的数据变动（三种用法）

猜你喜欢