欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中的watch

程序员文章站 2022-03-30 09:01:04
...

 在vue中,使用watch来响应数据的变化。下面代码是watch简单的用法:

<template>
   <input v-model="example1"/>
   <input v-model="example2"/>
   <input v-model="example3.test"/>
</template>
<script>
   export default {
      data(){
        return {
          example1:"",
          example2:"",
          example3:{
            test:1,
            test1:2
          }
        }
      },
      watch:{
        example1(curVal,oldVal){
          console.log(curVal,oldVal);
        },
        example2:'a',//值可以为methods的方法名
        example3:{
         //数据为对象或数组时,curVal和oldVal是相等的,这两个形参指向的是同一个数据对象
          handler(curVal,oldVal){
            console.log(curVal,oldVal)
          },
          deep:true,
                immediate: true
        }
      },
      methods:{
        a(curVal,oldVal){
          conosle.log(curVal,oldVal)
        }
      }
    }
</script>

一.监听值变化

<input type="text" v-model="test_input" />

<script>
   export default {
      data(){
        return {
          test_input:""
        }
      },
      watch:{
        test_input(curVal,oldVal){
          console.log(curVal,oldVal);
        }
      }
    }
</script>

二.监听处理函数,在所监听的数据后面直接加字符串形式的方法名:

 <input type="text" v-model="test_input" />

<script>
   export default {
      data(){
        return {
          test_input: "",
        }
      },
      watch:{
        test_input: "test_click",
      },
      methods:{
        test_click() {
                console.log(this.test_input);
             }
      }
    }
</script>

三.监听对象变化

 <input type="text" v-model="test_input.input_val" />

<script>
   export default {
      data(){
        return {
          test_input: {
                 input_val: "123",
                 test_btn: "saqd"},
        }
      },
      watch:{
        test_input: {
               handler(curVal, oldVal) {
                      console.log("test_input", curVal, oldVal);
               },
             deep: true,//对象内部深遍历
             immediate: true//最初绑定值的时候也执行监听
             },
      },
      methods:{
        test_click() {
                console.log(this.test_input);
             }
      }
    }
</script>

immediate

使用watch时有一个特点,当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。

immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

deep

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。

设置deep: true 则可以监听到cityName.name的变化,此时会给cityName的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:

watch: {
    test_input.input_val: {
      handler(curVal, oldVal) {
        console.log("example2", curVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  },

PS:以上内容仅供参考,如有疑问敬请指正。

转载于:https://my.oschina.net/ochmdlc/blog/3059180