zoukankan      html  css  js  c++  java
  • 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
          },
  • 相关阅读:
    IDEA 学习笔记之 Scala项目开发
    IDEA 学习笔记之 Java项目开发
    IDEA 学习笔记之 安装和基本配置
    MongoDB 学习笔记之 索引
    MongoDB 学习笔记之 删除数据,集合,数据库
    Shiro学习(13)RememberMe
    Shiro学习(12)与Spring集成
    Shiro学习(11)缓存机制
    Shiro学习(10)Session管理
    Shiro学习(9)JSP标签
  • 原文地址:https://www.cnblogs.com/mydxy/p/11488586.html
Copyright © 2011-2022 走看看