zoukankan      html  css  js  c++  java
  • watch监听数据变化详解

    一、使用

    watch: {
        mydata(val, newval) {
            console.log(val)
            console.log(newval)
        }
      }

    二、属性详解

    • immediate

    • handler

    • deep

    (1)immediate和handler 

    watch特点:当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。

    如果需要在最初绑定值的时候也执行函数,则需要用带immediate属性。

    eg:

    watch: {
         myData: {
            handler(newVal) {
                this.change_number++
            },
            immediate: true
         }
    }

    (2)deep

    当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听。

    eg:

    data() {
        return {
            myData: {
                'id': 1,
                'text': 'abc'
            }
        }
    },
    watch: {
         myData: {
            handler(newVal) {
                this.change_number++
            },
            deep: true
        }   
    }

    设置deep:true则可以监听到mydata.id的变化,此时会给mydata的所有属性都加上这个监听器,

    当对象属性较多时,每个属性值的变化都会执行handler,如果只需要监听对象中的一个属性值,则可以做一下优化“使用字符串的形式监听对象属性:

    eg:

    data() {
        return {
            docData: {
                'doc_id': 1,
                'tpl_data': 'abc'
            }
        }
    },
    watch: {
        'docData.doc_id': {
            handler(newVal, oldVal) {
                ......
            },
            deep: true
        }   
    }

    这样只会给对象的某个特定的属性加监听器

    三、总结

    数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。

  • 相关阅读:
    bzoj4195 [Noi2015]程序自动分析
    bzoj4236 JOIOJI hash 模拟
    bzoj1012 [JSOI2008]最大数maxnumber
    day 4 名片管理系统 -函数版
    day 3 局部变量 全局变量
    day 2 函数的嵌套
    day1 函数 (独立功能代码块)
    day 14 元组
    day 13 字典dict 操作
    day 12 列表字典 补充
  • 原文地址:https://www.cnblogs.com/meiyanstar/p/14047456.html
Copyright © 2011-2022 走看看