Skip to content

[vue] vue能监听到数组变化的方法有哪些？为什么这些方法能监听到呢？ #421

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.

Sign up for GitHub

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
Open
haizhilin2013 opened this issue Jun 22, 2019 · 19 comments
Open

[vue] vue能监听到数组变化的方法有哪些？为什么这些方法能监听到呢？ #421

haizhilin2013 opened this issue Jun 22, 2019 · 19 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] vue能监听到数组变化的方法有哪些？为什么这些方法能监听到呢？
@haizhilin2013 haizhilin2013 added the vue vue label Jun 22, 2019
@wenyejie
Copy link

你说的是vue内部的源码对Array数据的中转代理嘛
好像对push, shift等通用方法都做了代理吧!
因为它对中转的数据都做了监听

@suchanglin
Copy link

suchanglin commented Jun 29, 2019 •
edited
Loading

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
数组更新检测

@Kntt
Copy link

Kntt commented Jul 4, 2019

楼上的这些方法，都是在框架内重写过的，并不是原生的方法了，新的方法 里面增加了监听

@haizhilin2013
Copy link
Collaborator Author

@Kntt 知道框架内是怎么重写的吗？

@Kntt
Copy link

Kntt commented Jul 4, 2019

@haizhilin2013
image这不算偷懒吧

@haizhilin2013
Copy link
Collaborator Author

@Kntt 牛，直接上源码！只要你能看得懂，能理解就好

@Kntt
Copy link

Kntt commented Jul 4, 2019

把数组原有的方法， 继续执行， 后面增加了ob.dep.notify() 这个是关键

@haizhilin2013
Copy link
Collaborator Author

那你知道这个ob的dep属性是用来做什么的吗？有研究过吗？

@Kntt
Copy link

Kntt commented Jul 4, 2019

这个里面放着订阅者模式里面的订阅者，通过notify来通知订阅者做处理， 这里面源码也都看过， 时间久了淡忘了， 一会回去再看一遍 哈哈

@haizhilin2013
Copy link
Collaborator Author

在源码中，有好几处地方都调用了ob.dep.notify()，你想下，你觉得大概会在什么时候调用到它呢？像刚才的数组方法的重写算是一个。

@haizhilin2013
Copy link
Collaborator Author

先不去翻开源码，可以结合你自己的理解

@Kntt
Copy link

Kntt commented Jul 4, 2019

嗯， 最直接的地方是 劫持的set里面

@haizhilin2013
Copy link
Collaborator Author

@Kntt 很棒哦！像对象的set和del都会调用它这个方法进行通知

@Kntt
Copy link

Kntt commented Jul 4, 2019

这是vue的核心之一， 订阅者模式里面的广播， 还一块就是订阅者的收集， vue利用defineProperty, 把这两件事做了
del里面我还真忘了， 这几天没事再看看源码，每看一遍都哟不同的收获～～

@haizhilin2013
Copy link
Collaborator Author

haizhilin2013 commented Jul 4, 2019 •
edited
Loading

是啊，多看有益，每次都会有不同的收获！非常棒！
vue还有好些题目，相信对你来说应该很轻松了！

@Kntt
Copy link

Kntt commented Jul 4, 2019

这几天一直在看这个repo， 看到不会的或者不熟的就去补一补

@haizhilin2013
Copy link
Collaborator Author

感谢关注！能对大家起到一丁点的作用，我也就满足了！
坚持积累，查漏补缺，看来你已经明白了此开源项目的真正意义了！并不是纯粹为了刷面试题而来的！

@vipbo
Copy link

vipbo commented Jul 24, 2019

楼上很像在面试

@liushengguang
Copy link

楼上很像在面试

同感

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 @liushengguang @Kntt @suchanglin @vipbo