Vue中watch的高级用法

Posted mydxy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中watch的高级用法相关的知识,希望对你有一定的参考价值。

<template>
  <div>
      <input type="text" v-model="value">
  </div>
</template>

<script>
  export default 
    data() 
      return 
        value:null
      
    ,
    created()
      this.test()
    ,
    methods: 
      test()
        console.log("第一个加载")
      
    ,
    watch: 
      value(val)
        this.test()
      
      
    ,  
  
</script>

上面的代码的效果是,页面第一次加载需要调用test方法,每次输入都要调用test方法

可以使用handler方法和immediate属性进行优化

immediate:true代表如果在 wacth 里声明了 test 之后,就会立即先去执行里面的handler方法,

如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。

    watch: 
      value:
        handler:‘test‘,
        immediate:true
      ,
      
    ,  

这样可以每次输入调用test方法,当然要是你需要每次拿到值也可以这样写

    watch: 
      value:
        //handler:‘test‘,
        handler(val)
          console.log(val)
        ,
        immediate:true
      ,
      
    ,  

 

deep的用法

watch 里面还有一个属性 deep,默认值是 false,代表是否深度监听,比如我们 data 里有一个obj属性:

<template>
  <div>
      <input type="text" v-model="obj.a">
  </div>
</template>

<script>
  export default 
    data() 
      return 
        value:null,
        obj:
          a:null
        
      
    ,
    created()

    ,
    methods: 
      test()
        console.log("第一个加载")
      
    ,
    watch: 
      obj:
         handler(val)
          console.log(val)
        ,
        immediate:true,
      ,
      
    ,  
  
</script>

 

当我们在在输入框中输入数据视图改变obj.a的值时,我们发现是无效的

这时候可以使用deep

    watch: 
      obj:
         handler(val)
          console.log(val)
        ,
        immediate:true,
        deep:true
      

 

也可以使用 字符串

    watch: 
      ‘obj.a‘:
         handler(val)
          console.log(val)
        ,
        immediate:true,
        deep:true
      ,

 

以上是关于Vue中watch的高级用法的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js中 watch 的高级用法

vue watch的高级用法

Vue.js中侦听器(watch)的高级用法

vue高级用法

watch 的高级用法

vue-router高级用法