zoukankan      html  css  js  c++  java
  • vue中watch高级用法(deep和immediate)

    一、handler方法和immdiate属性

    watch默认绑定,页面首次加载时,是不会执行的。只有值发生改变才会执行。

    如果想立即执行怎么办?

    1 watch:{
    2     name:{
    3       handler(newName,oldName){
    4           //执行代码
    5       },
    6       immediate:true //true就表示会立即执行
    7     }
    8 }

    二、deep属性

    如果是监听的是对象类型,当手动修改对象的某个属性时,发现是无效的。

    这时候就需要deep属性。

    data:{
        obj:{
          a:1
        }
    },
    watch:{
        obj:{
          handler(newName,oldName){
              //执行代码
          },
          deep:true //为true,表示深度监听,这时候就能监测到a值变化
        }
    }

    deep为true,就可以监测到对象中每个属性的变化。

    它会一层层遍历,给这个对象的所有属性都加上这个监听器。但是这样性能开销会比较大,修改任何一个属性,都会出发这个监听器里的handler.

    三、deep优化

    可以使用字符串形式监听

    data:{
        obj:{
          a:1
        }
    },
    watch:{
        'obj.a':{
          handler(newName,oldName){
              //执行代码
          },
          deep:true //为true,表示深度监听,这时候就能监测到a值变化
        }
    }

    这样vue就会一层层解析,知道遇到属性a,然后才给a设置监听函数。

    参考链接:https://juejin.im/post/5ae91fa76fb9a07aa7677543

  • 相关阅读:
    在Linux系统中Navicat for MySQL 出现1045错误如何处理
    一个老程序员这些年的心得体会
    忘了
    DAY11
    day10_plus
    day10
    东北育才冲刺noip(day9)
    Java语言Socket接口用法详解
    JDBC-ODBC桥连接方式操纵SQL数据库
    JDBC连接SQL Server 2005步骤详解
  • 原文地址:https://www.cnblogs.com/lanleiming/p/13256099.html
Copyright © 2011-2022 走看看