Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[vue] watch怎么深度监听对象变化 #265

Open
haizhilin2013 opened this issue Jun 16, 2019 · 5 comments
Open

[vue] watch怎么深度监听对象变化 #265

haizhilin2013 opened this issue Jun 16, 2019 · 5 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] watch怎么深度监听对象变化
@haizhilin2013 haizhilin2013 added the vue vue label Jun 16, 2019
@wenyejie
Copy link

'a.b.c', 然后直接解析到c那层, 绑定observer

@April-Zheng
Copy link

'obj.xx': { handler: function(val) {}, deep:true }

@lancelote-zpc
Copy link

lancelote-zpc commented Mar 18, 2020 •
edited

deep设置为true 就可以监听到对象的变化

    let vm=new Vue({
        el:"#first",
        data:{msg:{name:'北京'}},
        watch:{

            msg:{
                handler (newMsg,oldMsg){
                    console.log(newMsg);
                },
                immediate:true,
                deep:true
            }
        }
    })

@crush2020
Copy link

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

@yxllovewq
Copy link

yxllovewq commented Mar 9, 2022 •
edited

为什么无法监听对象的属性，因为对象保存的是地址。
如何监听对象obj的属性a：

watch: {
  'obj.a': {
    deep: true,
    handler(newValue, oldValue){},
  }
}

如何监听对象obj的所有属性：

watch: {
 obj: {
    deep: true,
    handler(newObj, oldOb j){},
  }
}

注意：如果直接监听到具体的某个属性值则获取到的是newValue和oldValue，如果监听属性所属的对象或者祖先对象，则返回的是对应变更后的对象。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
vue vue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@wenyejie @haizhilin2013 @April-Zheng @lancelote-zpc @crush2020 @yxllovewq