类型:string | Function | Object

vue官网解释: 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

也就是说watch可以监听对象的变化,规则是键值对方式。

  1. export default {
  2. props: {
  3. fatherAjaxData: {
  4. type: Object
  5. }
  6. },
  7. data() {
  8. return {
  9. a: 1,
  10. b: 2,
  11. c: 3
  12. }
  13. },
  14. watch: {
  15. // 父级异步加载的数据 props 方式给到 当前子级
  16. fatherAjaxData: function (val, oldVal) {
  17. this.$nextTick(() => {
  18. console.log('监听到已异步加载的fatherAjaxData数据 已有值');
  19. });
  20. },
  21. a: function (val, oldVal) {
  22. console.log(`watch a val change --- new val: ${val}, old val: ${oldVal}`);
  23. },
  24. // watch_b_val_change 方法名
  25. b: 'watch_b_val_change',
  26. c: {
  27. handler: function (val, oldVal) {
  28. console.log(`watch c val change --- new val: ${val}, old val: ${oldVal}`);
  29. },
  30. deep: true // 为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
  31. }
  32. },
  33. mounted() { // vue 生命周期方法 vue页面全部加载完毕(不包括异步数据)
  34. this.$nextTick(() => {
  35. console.log('vue页面加载完毕!');
  36. });
  37. },
  38. methods: {
  39. watch_b_val_change(val, oldVal) {
  40. console.log(`watch b val change --- new val: ${val}, old val: ${oldVal}`);
  41. }
  42. }
  43. };

this.$nextTick :vue生命周期方法 当数据发生变化 dom变化后 执行$nextTick的callback方法

deep: 为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

  1. vm.$watch('someObject', callback, {
  2. deep: true
  3. })
  4. vm.someObject.nestedValue = 123
  5. // callback is fired

vue2.0 watch的更多相关文章

  1. vue2.0实践的一些细节

    最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...

  2. vue2.0构建淘票票webapp

    项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...

  3. Vuex2.0+Vue2.0构建备忘录应用实践

    一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...

  4. 一步步构造自己的vue2.0+webpack环境

    前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...

  5. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  6. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  7. vue2.0实战

    学了几周的vue2.0,终于有时间去做一个应用了. 为了全面联系相关知识,所以用到了vue-router,以及作者最新推荐的axios,组件库用的是饿了么的mint-ui2.0. 项目构建使用官方vu ...

  8. vue DatePicker vue2.0的日期插件

    一个用vue2.0写的日期控件,可以支持简单的年月日选择.地址:https://github.com/Stevenzwzhai/vue-datepicker. 首先是关于日期对象的使用,基本就是日期的 ...

  9. 项目vue2.0仿外卖APP(六)

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  10. 项目vue2.0仿外卖APP(五)

    header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...

随机推荐

  1. bzoj 2434 [Noi2011]阿狸的打字机——AC自动机

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2434 dfs AC自动机,走过的点权值+1,回溯的时候权值-1:走到询问的 y 串的节点,看 ...

  2. D - Going Home POJ - 2195 网络流

    On a grid map there are n little men and n houses. In each unit time, every little man can move one ...

  3. 【洛谷P1288】取数游戏II

    取数游戏II 题目链接 显然,由于一定有一个0,我们可以求出从初始点到0的链的长度 若有一条链长为奇数,则先手可以每次取完一条边上所有的数, 后手只能取另一条边的数,先手必胜: 反之若没有奇数链,后手 ...

  4. FreeImage.lib库的配置和简单使用 转

    转载地址 http://www.codeweblog.com/win8-1%E4%B8%8Bfreeimage-lib%E5%BA%93%E7%9A%84%E9%85%8D%E7%BD%AE%E5%9 ...

  5. sudoers文件解析 转自:http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=1971013

    今天在用户组中新加了一个普通用户,开始这个用户没有sudo权限,于是通过sudo visudo修改了sudo的配置文件,赋予了普通用户的root权限.后来想着能不能将/etc/sudoers文件的访问 ...

  6. 自己平时收集的css、html笔记(适合初级前端攻城狮)

    实习了一年时间,陆陆续续记录下来一堆笔记,不过也丢失了一些... 以后会持续更新.扩展,现在把碰到的知识点归纳于此,方便翻阅 一.html部分 1.取消iPhone自动识别数字为拨打号码 <me ...

  7. python tips(持续更新中)

    python tips 可变对象与不可变对象 在python中,可变对象有数值类型(int,float),字符串(str),元组(tuple),可变对象有列表(list),字典(dict),集合(se ...

  8. 9.异常Exception

    9.1 异常概述 package exception; /* * 异常:程序运行的不正常情况 * * Throwable: 异常的超类 * |-Error * 严重问题,这种问题我们通过异常处理是不能 ...

  9. 分享一个带有合计行功能的DataGridView扩展

    因为一个Winform的项目中需要用到带有合计行的表格,并且需要满足以下需求: 合计行可自动对需要求和的列进行求和计算; 合计行必须固定(冻结)在表格的最底部,且其位置不受滚动条的滚动而移动; 可以设 ...

  10. django-单表操作

    #######单表操作######## 前面视图层,模板层.路由层都写了大概,项目肯定是会和数据库打交道,那就讲讲orm的单表查询吧,直接写过一点点,不太全面. 1.项目刚创建好,我们需要在setti ...