其他分享
首页 > 其他分享> > Vue2.0 Vue监测数据的原理_数组

Vue2.0 Vue监测数据的原理_数组

作者:互联网

添加一个爱好(hobby:[])

> vm._data
< {__ob__: Observer}
    address: (...)
    name: (...)
    student: Object
    friends: (...)
    hobby: Array(3)
        0: "玩游戏"
        1: "看动漫"
        2: "看直播"
        length: 3

没有找到为数组服务的getset
由于你把hobby写成了一个数组,它并没有为数组里的某一个元素去匹配getset, 如果没有为0,1服务的get,set那也就意味着某一天你通过这个0索引值去改变"玩游戏"的时候,数据能改掉但是Vue监测不到,也不会引起页面的更新;名字一改就会引起set name(val)就调,就重新解析模板后续的动作都开始执行,但是由于你爱好里面想改掉"玩游戏",它没有与之对应的set

> vm._data.student.hobby[0] = '学习'
< '学习'

> vm._data.student.hobby
< (3) ['学习', '看动漫', '看直播', __ob__: Observer]

改了,但是vue不知道你改了, vue里面数组的监视不是靠getset是靠

Vue的作者是这么想的:程序员里有一个数组(let arr = [1,3,5,7])程序员想要修改这个数组有可能调用哪些方法呢?
你想往数组里最后一个位置新增一个元素:push
想删除最后一个元素:pop
想删除第一个元素:shift
想往前面加一个:unshift

splice
想在数组中间插入一个元素
在指定位置删除一个元素
或者替换掉指定位置的某个元素

想为数组进行一个排序:sort
想反转这个数组:reverse

以上的方法都是可以修改数组的

filter因为不会影响原数组的改变,既然不能影响原数组的改变,那vue怎么知道你改了数组呢?

添加一个爱好

> vm._data.student.hobby.push('学习')
< 4

删除第一个爱好

> vm._data.student.hobby.shift()
< '玩游戏'

替换调第一个爱好

> vm._data.student.hobby.splice(0,1,'打台球')
< ['看动漫']
    0: "看动漫"
    length: 1
    [[Prototype]]: Array(0)

splice中

0:第一个元素,也就是大于等于0
1:也就是小于1的
‘打台球’:替换的信息

Vue是怎么知道这些方法的?

它用了一个技术,叫’包装’

你是不是找到了一个数组,叫vm._data.student.hobby
你是不是调了这个push()
就你所调用的这个push()已经不是数组身上最原汁原味的那个push,说白了就是说不是数组原型对象上的push了(Array.prototype.push())
arr身上没有push沿着原型(Prototype)找

> vm._data
< {__ob__: Observer}
    address: (...)
    name: (...)
    student: Object
        friends: (...)
        hobby: Array(3)
        0: "玩游戏"
        1: "看动漫"
        2: "看直播"
        length: 3
        __ob__: Observer {value: Array(3), dep: Dep, vmCount: 0}
        [[Prototype]]: Array
            pop: ƒ mutator()
            push: ƒ mutator()
            reverse: ƒ mutator()
            shift: ƒ mutator()
            sort: ƒ mutator()
            splice: ƒ mutator()
            unshift: ƒ mutator()

所以我们可以验证一下一个事情

```Console
> arr.push === Array.prototype.push
< true 

我们可以照样验证:

> vm._data.student.hobby.push === Array.prototype.push
< false

这个hobby数组被vue管理了,你调用的push不再是原型对象上的push
先找到的是vue写的这个push,给你做了俩件事:

其实还有一个方法改变数组

> Vue.set(vm._data.student.hobby,0,'学习')
< '学习'
> vm.$set(vm._data.student.hobby,0,'学习')
< '学习'

注:Vue.set和vm.$set里第一个元素target不能是vm本身和vm源数据
使用数据代理写法

> vm.student.hobby.push('学习')
< 4

标签:监测数据,Vue,student,vm,数组,._,push,hobby,Vue2.0
来源: https://blog.csdn.net/yasinawolaopo/article/details/121872086