Vue-数据监听-数组监听
说完了对象的监听和后期添加对象的操作,接下来,我们来说一说针对于数组的监听。1、首先还是定义一组数据用于展示,hobbys 为字符串数组,friends 为对象数组const vm = new Vue({el: '#root',data() {return {hobbys: ['抽烟', '喝酒', '烫头'],firends: [{ name: 'al', age: 20 },{ name: '
说完了对象的监听和后期添加对象的操作,接下来,我们来说一说针对于数组的监听。
1、首先还是定义一组数据用于展示,hobbys 为字符串数组,friends 为对象数组
const vm = new Vue({
el: '#root',
data() {
return {
hobbys: ['抽烟', '喝酒', '烫头'],
firends: [
{ name: 'al', age: 20 },
{ name: 'hj', age: 22 }
]
}
},
})
2、展示完了之后,我们在控制台上查看 vm.data 发现 两个数组中的值,并没有像对象中的值一样,绑定一个 get 和 set 方法
这也就是意味着,如果我通过 vm._data.hobbys 去修改 hobbys 的第一个值的时候,Vue内的数据是会修改的,但是,因为没有 set 函数,无法监听到数据的改变,所以页面上是不会重新渲染修改后的属性值的。例如下图
Vue-数组变更方法
那我需要改变数组且还能让Vue监听到重新渲染页面的话,又应该怎么办呢?对此,Vue 是这样考虑的。
Vue 收集了我们平时操作数组的方法,发现 push、pop、shift、unshift,splice,sort、reserve这七个操作数组的方法,都会对原数组产生影响,反之像 map、filter、some、every等数组遍历的方法都只是会产生一个新的数组,并不会对原数组产生影响。
所以 Vue 将这7个方法进行了处理,并规定如果调用了这七个操作数组的方法,那我的 Vue 才会去监听数据的改变,如果是map等方法,那你原数据都没有改变,我也不用监听了。所以,当我想去操作数组中的属性的时候,我们不能直接 通过序号来操作,而是需要调用数组的这七个方法,例如
那又出现一个问题了,我调用了 push 这七个操作数组的方法之后,Vue 是怎么知道我调了的呢?这个时候我们把 hobbys 展开来看就能发现原因所在了
因为 hobbys 也是一个数组,所以它的 prototype 是一个 Array。我们将它展开之后发现,上面挂载了 我们说的这七个操作数组的方法,所以说,当我们通过 vm._data.hobbys.push() 来操作数据的时候,实际上我们调用的是原型上自带的 push 方法,调用其他六个数组方法也是一样。
之前说过了 Vue 把这七个操作数组的方法进行了处理,实际上是Vue将这七个方法进行了包装,然后直接挂载到了Vue的数组原型对象上。所以,这七个方法和js自带的七个方法实际上是不一样的
那么 Vue 包装之后的这些方法里面又是怎么做的来让Vue实现对数据监听的呢?我们还是以push为例,当调用 vm中数组原型上的 push 方法之后,分别作了如下操作
1、调用原生的 push方法,改变数组数据
2、生成新的虚拟DOM,新旧虚拟DOM对比,模板编译、页面重新渲染
那如果我们不使用这七个方法,就不能监听数据重新渲染了么?那肯定是不可能的,还记得上一章讲的 set 方法么,其实 set 也可以对数组使用,不过使用的很少就是了,具体使用方法:
target:之前说了可以使用vm._data,但是因为Vue的数据代理,我们也可以简写成 vm
key:直接写需要改变的数据的索引值就行
value:需要改变的值
总结
1、Vue 监听数组改变,使用的是 数组的变更方法,包括:push、pop、shift、unshift、splice、sort、reserve,因为这七个方法操作数组之后,会改变原数组
2、这七个方法不是Array.prototype 上的方法,而是经过 Vue 的包装处理之后,挂载到Vue 的 Array.prototype 上的
3、同时也可以使用 set 方法,以此来改变当前数组,且Vue还能监听到,不过基本不这么使用
更多推荐
所有评论(0)