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
          },
  • 相关阅读:
    ES6与ES5对比 模板字符串
    ES6 4个方法
    apicloud 聊天输入框模块UIChatBox
    apiCloud 调微信支付,调支付宝支付
    apiCloud 版本号
    apiCloud 下拉刷新
    apiCloud 上拉加载
    微信小程序页面内转发 按钮 转发
    CodeSmith datagridview属性
    CodeSmith listview属性
  • 原文地址:https://www.cnblogs.com/mydxy/p/11488586.html
Copyright © 2011-2022 走看看