Vue的数组操作的实现代码大致如下:

const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
const arrayAugmentations = []; aryMethods.forEach((method)=> { // 这里是原生Array的原型方法
let original = Array.prototype[method]; // 将push, pop等封装好的方法定义在对象arrayAugmentations的属性上
// 注意:是属性而非原型属性
arrayAugmentations[method] = function () {
console.log('我被改变啦!'); // 调用对应的原生方法并返回结果
return original.apply(this, arguments);
}; }); let list = ['a', 'b', 'c'];
// 将我们要监听的数组的原型指针指向上面定义的空数组对象
// 别忘了这个空数组的属性上定义了我们封装好的push等方法
list.__proto__ = arrayAugmentations;
list.push('d'); // 我被改变啦! 4 // 这里的list2没有被重新定义原型指针,所以就正常输出
let list2 = ['a', 'b', 'c'];
list2.push('d'); //

在Vue的官方文档中,有着如下的提示:

  1. 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如: vm.items.length = newLength

这个是Js语法的限制,什么限制呢?

先来看一下,在这篇文章中写到,为什么不利用如下的代码来实现:

function FakeArray() {
return Array.call(this,arguments);
} FakeArray.prototype = [];
FakeArray.prototype.constructor = FakeArray; FakeArray.prototype.push = function () {
console.log('我被改变啦');
return Array.prototype.push.call(this,arguments);
}; let list = ['a','b','c']; let fakeList = new FakeArray(list);

然而,作者在测试代码的时候,发现fakeList实际上是一个数组,而且它的push是内置的push方法,并不是继承FakeArray的方法。

在作者文章的评论中,有个网友评论说,这是因为Array.call并不会引用this,不止Array,String,Number,Regexp,Object等等JS的内置类都不行。

所以实际上代码是这样的:

function FakeArray() {
return Array(arguments);
}

这也就是ES5以下无法完美继承数组的问题,回过头看一下Vue中的实现,Vue的作者用的是__proto__属性,该属性指向构造对象的原型。

也就是说,上面的例子我们可以这样改写:

function FakeArray() {
var x = Array.call(null,arguments);
x.__proto__ = FakeArray.prototype
return x;
} FakeArray.prototype = [];
FakeArray.prototype.constructor = FakeArray; FakeArray.prototype.push = function () {
console.log('我被改变啦');
return Array.prototype.push.call(this,arguments);
}; let list = ['a','b','c']; let fakeList = new FakeArray(list);

但是呢,这样写,也就意味着我们不能检测到length,和fakeList[x] = 1;这样的操作,也就有了Vue文档中的提示了。

本文参考自https://github.com/youngwind/blog/issues/85及其评论。

关于Vue数组操作的更多相关文章

  1. Vue数组操作不刷新视图问题的解决

    最近使用Vue2.0开发项目,有一个列表使用v-for绑定到数组,按照Vue的推荐方案,使用push.splice.this.$set三个变异方法操作数组.发现在添加页面,三个方法都能及时刷新视图:但 ...

  2. 【vuejs】vue数组操作

    问题:两种操作都能给数组添加数据,但是利用下标添加数据不会自动在视图中渲染,这个是和vue自己的规定有关,这里记录一下 网上到原因,这里附转载链接 点我传送 官网相关说明传送门

  3. 11. VUE 数组操作

    变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() 添加元素 <ul id="example-1"> <li ...

  4. vue数组操作不更新视图问题

    vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...

  5. vue数组操作不触发前端重新渲染

    暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决. 此外,能够监听的数组变异方法 https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC% ...

  6. Vue数组更新及过滤排序

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...

  7. vue 数组

    今天项目中发现的一个问题: 在vue项目中输出一个数组,明明有俩个值:0,6,但是length为1 正常的是这样的 结果研究发现,是vue源码的问题,具体内容如下: 转载自:http://www.cn ...

  8. Vue 数组封装和组件data定义为函数一些猜测

     数组封装 var vm={ list:[0,1] } var push=vm.list.push;//把数组原来的方法存起来 vm.list.push=function(arg){//重新定义数组的 ...

  9. 包括ES6在内的数组操作(待更)

    下面是我对ES6和古老的JS(ES3)一些数组操作的总结,附带了一些我曾经用上的. map处有待更内容. 贴一下有借鉴的网站:https://segmentfault.com/a/1190000002 ...

随机推荐

  1. 【转】python3 内循环中遍历map,遍历一遍后再次进入内循环,map为空

    今天在使用python map的过程中,发现了一个奇怪问题,map遍历完成后,再次访问map,发现map为空了,特记录下来,以备日后查看. 如下代码,期望的结果是每次从外循环进入内循环,map都从头开 ...

  2. sftp修改用户home目录后登录时报connection closed by remote host

    在sftp用户需要修改登录根目录的情况下,我们可以修改/etc/ssh/sshd_config文件中ChrootDirectory /home/[path]的路径. 但是,在重启sshd服务后,sft ...

  3. 微信接收QQ邮箱e-mail

  4. Python序列结构--集合

    集合:元素之间不允许重复 集合属于Python无序可变序列,元素之间不允许重复 集合对象的创建与删除 直接将值赋值给变量即可创建一个集合 >>> a = {3,5}>>& ...

  5. js every some 遍历函数理解

    1.every let arr = [0, 1, 2, 3, 4, 5]; let result = arr.every((item, index) => { return item >= ...

  6. Leetcode35 Search Insert Position 解题思路(python)

    本人编程小白,如果有写的不对.或者能更完善的地方请个位批评指正! 这个是leetcode的第35题,这道题的tag是数组,python里面叫list,需要用到二分搜索法 35. Search Inse ...

  7. JS中创建多个相同的变量出现的问题

    在做轮播图的时候出现了一个问题:如果定义两个完全相同的变量会发生什么: 1.两个全局变量: var num = 10; var num =100; 这种情况下很明显输出num的话会是100,但是内存中 ...

  8. Using iSCSI On Ubuntu 10.04 (Initiator And Target)

    This guide explains how you can set up an iSCSI target and an iSCSI initiator (client), both running ...

  9. HBase体系架构和集群安装

    大家好,今天分享的是HBase体系架构和HBase集群安装.承接上两篇文章<HBase简介>和<HBase数据模型>,点击回顾这2篇文章,有助于更好地理解本文. 一.HBase ...

  10. django数据库连接快速配置

    DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql',#数据库驱动 'NAME': 'login_db',#数据库名字 'US ...