Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

wenyejie

wenyejie commented on Jun 27, 2019

@wenyejie

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

suchanglin

suchanglin commented on Jun 29, 2019

@suchanglin

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

Kntt

Kntt commented on Jul 4, 2019

@Kntt

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

haizhilin2013

haizhilin2013 commented on Jul 4, 2019

@haizhilin2013
CollaboratorAuthor

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

Kntt

Kntt commented on Jul 4, 2019

@Kntt

@haizhilin2013
image这不算偷懒吧

haizhilin2013

haizhilin2013 commented on Jul 4, 2019

@haizhilin2013
CollaboratorAuthor

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

Kntt

Kntt commented on Jul 4, 2019

@Kntt

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

haizhilin2013

haizhilin2013 commented on Jul 4, 2019

@haizhilin2013
CollaboratorAuthor

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

Kntt

Kntt commented on Jul 4, 2019

@Kntt

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

haizhilin2013

haizhilin2013 commented on Jul 4, 2019

@haizhilin2013
CollaboratorAuthor

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

haizhilin2013

haizhilin2013 commented on Jul 4, 2019

@haizhilin2013
CollaboratorAuthor

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

Kntt

Kntt commented on Jul 4, 2019

@Kntt

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

haizhilin2013

haizhilin2013 commented on Jul 4, 2019

@haizhilin2013
CollaboratorAuthor

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

Kntt

Kntt commented on Jul 4, 2019

@Kntt

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

haizhilin2013

haizhilin2013 commented on Jul 4, 2019

@haizhilin2013
CollaboratorAuthor

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

Kntt

Kntt commented on Jul 4, 2019

@Kntt

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

haizhilin2013

haizhilin2013 commented on Jul 4, 2019

@haizhilin2013
CollaboratorAuthor

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

vipbo

vipbo commented on Jul 24, 2019

@vipbo

楼上很像在面试

liushengguang

liushengguang commented on May 7, 2020

@liushengguang

楼上很像在面试

同感

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @wenyejie@haizhilin2013@liushengguang@Kntt@suchanglin

        Issue actions

          [vue] vue能监听到数组变化的方法有哪些?为什么这些方法能监听到呢? · Issue #421 · haizlin/fe-interview