zoukankan      html  css  js  c++  java
  • vue watch监控对象

    1、普通的watch

    复制代码
    data() {
        return {
            frontPoints: 0    
        }
    },
    watch: {
        frontPoints(newValue, oldValue) {
            console.log(newValue)
        }
    }
    复制代码

    2、数组的watch

    复制代码
    data() {
        return {
            winChips: new Array(11).fill(0)   
        }
    },
    watch: {
      winChips: {
        handler(newValue, oldValue) {
          for (let i = 0; i < newValue.length; i++) {
            if (oldValue[i] != newValue[i]) {
              console.log(newValue)
            }
          }
        },
        deep: true
      }
    }
    复制代码

    3、对象的watch

    复制代码
    data() {
      return {
        bet: {
          pokerState: 53,
          pokerHistory: 'local'
        } } }, watch: {   bet: {
        handler(newValue, oldValue) {
          console.log(newValue)
        },
        deep: true
      }
    }
    复制代码
    tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;
    如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。
    事例如下:

     4、对象具体属性的watch[活用computed]

    复制代码
    data() {
      return {
        bet: {
          pokerState: 53,
          pokerHistory: 'local'
        } } },
    computed: {
      pokerHistory() {
        return this.bet.pokerHistory
      }
    }, watch: {   pokerHistory(newValue, oldValue) {
        console.log(newValue)
      }
    }
  • 相关阅读:
    Trie图
    Bestcoder Round#45
    Codeforces Round#308
    bestcoder44#1002
    LCA最近公共祖先 Tarjan离线算法
    HYSBZ 1269文本编辑器 splay
    NOI2005维修数列 splay
    hdu3487 伸展树(区间搬移 区间旋转)
    poj3580 伸展树(区间翻转 区间搬移 删除结点 加入结点 成段更新)
    hdu1890 伸展树(区间反转)
  • 原文地址:https://www.cnblogs.com/web-chuanfa/p/9372459.html
Copyright © 2011-2022 走看看