1、普通的watch

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

2、数组的watch,注意监听数组的变动不需要deep: true 。

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

fill方法使用给定值,填充一个数组。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。

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)
  }
}
 
 

vue watch 监听的更多相关文章

  1. vue时时监听input输入框中 输入内容 写法

    Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...

  2. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  3. 详解Vue 如何监听Array的变化

    详解Vue 如何监听Array的变化:https://www.jb51.net/article/162584.htm

  4. 设计模式(5): vue 不监听绑定的变量

    概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...

  5. 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...

  6. Vue -- 数据监听

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 12.vue属性.监听.组件

    1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.h ...

  9. vue中监听window.resize的变化

    我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...

  10. vue+hbuilder监听安卓返回键问题

    1.监听安卓返回键问题 效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面 1 2 import mui from './assets/js/mui.min ...

随机推荐

  1. PHP实用小程序(一)

    <? //设置路径(默认当前php文件所在路径) $basedir = "d:/inetpub/wwwroot"; $textrows = "20"; $ ...

  2. 梦工厂实验室 蛇形填数 dfs

    问题 D: 蛇形填数 时间限制: 3 Sec  内存限制: 64 MB提交: 28  解决: 5[提交][状态][讨论版] 题目描述 在n*n方阵里填入1,2,...,n*n,要求填成蛇形.例如n=4 ...

  3. 4.2 手写Java PriorityQueue 核心源码 - 实现篇

    上一节介绍了PriorityQueue的原理,先来简单的回顾一下 PriorityQueue 的原理 以最大堆为例来介绍 PriorityQueue是用一棵完全二叉树实现的. 不但是棵完全二叉树,而且 ...

  4. Unresolved function or method require()

    1. 这是在JavaScript配置中没有node.js,去设置中配置就行了,方法如下: setting -> Languages&Frameworks -> Javascript ...

  5. bzoj1130:[POI2008]POD Subdivision of Kingdom

    传送门 看到数据范围这么小,不由得算了一下暴力复杂度,算出来情况一共只有1e7,不多,再乘上暴力判断的复杂度,好像T了,判断的话位运算可以方便解决 但是我写的优化似乎比较渣,还留了个log,但是还是n ...

  6. C - Aladdin and the Flying Carpet

    #include<bitset> #include<map> #include<vector> #include<cstdio> #include< ...

  7. RecyclerView notifyDataSetChanged无效问题

    使用notifyDataSetChanged方法更新列表数据时, 一定要保证数据为同个对象(hashCode要一致) 所以重新刷新数据列表时, 不能使用 List list = mlist: 应该使用 ...

  8. UWP 播放媒体控件

    最近我的uwp需要有一个有声朗读的功能,like this 点击声音按钮就可以有声朗读了.这里主要是用了媒体播放的控件. 一般我们把需求分为两种: 一种是不需要呈现播放器的样子,只需要用户点击一下别的 ...

  9. 2016级萌新选拔赛BE题

    #include<bits/stdc++.h> using namespace std; #define ll long long ll a[]; ll d[]; int main() { ...

  10. 微信支付——基于laravel框架的php实现

    现在经手的几乎每个项目都支持微信支付,简单记录下接入的大致流程. 1.首先商户等申请各种账号,微信支付商户号,APPID,API密钥,Appsecret 2.app端上传支付需要的各个字段 3.后台收 ...