1. data:{
  2. a:1,
  3. b:{
  4. value:1
  5.    type:1,
  6.  
  7. }
  8. },
  9. watch:{
  10. a(val, oldVal){//普通的watch监听
  11. console.log("a: "+val, oldVal);
  12. },
  13. b:{//深度监听,可监听到对象、数组的变化
  14. handler(val, oldVal){
  15. console.log("b.value: "+val.value, oldVal.value);//但是这两个值打印出来却都是一样的
  16. },
  17. deep:true
  18. }
  19. }

如果只想监听b中的value,怎么办

方法一:

  1. watch:{
  2. a(val, oldVal){//普通的watch监听
  3. console.log("a: "+val, oldVal);
  4. },
  5. 'b.value':{//深度监听,可监听到对象、数组的变化
  6. handler(val, oldVal){
  7. console.log("b.value: "+val.value, oldVal.value);//但是这两个值打印出来却都是一样的
  8. },
  9. deep:true
  10. }
  11. }

方法二,借助computed

  1. computed: {
  2. newNum: function () {
  3. return this.b.value
  4. }
  5. }
  6. watch:{
  7. newNum:{
  8. handler(val, oldVal){
  9. console.log(oldVal);
  10. },
  11. deep:true
  12. }
  13. }

vue watch监听对象及对应值的变化的更多相关文章

  1. Vue——watch监听对象,监听嵌套多次的对象属性

    首先是watch 然后是methods

  2. 实时监听input输入框value值的变化

    1.js 的 oninput & onpropertychange JS中的 oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代 ...

  3. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  4. vue 监听对象里的特定数据

    vue  监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...

  5. vue--》如何使用wacth监听对象的属性变化?

    在开发过程中,我们经常需要监听watch监听一个对象的变化,但是如何来实现     监听对象中属性的变化呢? 先回顾一下如何监听整个对象的变化,使用watch就行了 export default { ...

  6. 在vue中使用watch监听对象或数组

    最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...

  7. vue watch监听不到对象,探究 watch 原理

    最近使用vue watch时,在某些模块监听不到对象的改变,无法触发回调函数. 解决: 使用watch监听对象时,只能监听到该对象初始化时已存在的key值. 如下例监听user对象,在初始化时没有ag ...

  8. Vue -- 数据监听

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

  9. vue中监听数据变化 watch

    今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...

随机推荐

  1. [Analytics] Add Tealium debugger in Chrome

    It would be helpful once you can see what information have been tracking inside you web application, ...

  2. ScrollView阻尼效果

    activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  3. bufferevent 与 socket

    http://blog.sina.com.cn/s/blog_56dee71a0100qx4s.html 很多时候,除了响应事件之外,应用还希望做一定的数据缓冲.比如说,写入数据的时候,通常的运行模式 ...

  4. 用户代码未处理 UpdateException

    无法更新 EntitySet"Project_project",由于它有一个 DefiningQuery.而 <ModificationFunctionMapping> ...

  5. Cookie防伪造防修改 电商课题:cookie防篡改

    主要防止非法用户修改cookie信息,以及cookie的超时时间 传统cookie存储,Cookie(name, value),value很容易就被篡改. 防修改cookie存储,Cookie(nam ...

  6. 理解Paxos Made Practical

    Paxos Made Practical 当一个组中一台机器提出一个值时,其它成员机器通过PAXOS算法在这个值上达成一致. Paxos分三个阶段. 第一阶段: 提出者会选出一个提议编号n(n> ...

  7. Android Material Design-Maintaining Compatibility(保持兼容性)-(七)

    转载请注明出处:http://blog.csdn.net/bbld_/article/details/40634829 翻译自: http://developer.android.com/traini ...

  8. Unable to find a team with the given Team ID或者Failed to code sign的问题解决

    Unable to find a team with the given Team ID或者Failed to code sign的问题解决 1:问题描述(注:这种情况一般是下载并打开别人项目时) F ...

  9. CASE UPDATE

    https://leetcode-cn.com/problems/swap-salary/description/ Given a table salary, such as the one belo ...

  10. ABAP文件加密解密-PGP

    1.SM69创建命令 2.解密 DATA: lv_para = '--passphrase (key) -o /oracle/sfdata/sfdata.csv -d /oracle/sfdata/s ...