计算机系统应用教程网站

网站首页 > 技术文章 正文

Vue2.0实现的数据双向绑定系统有什么缺陷?就是这2种

btikc 2024-10-12 13:25:32 技术文章 17 ℃ 0 评论

第一缺点:无法检测数组的变动

由于 JavaScript 的限制,Vue 不能检测以下数组的变动,这个限制指的是Object.defineProperty无法监听数组变化:

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

举个例子:

那为什么push()、pop()、shift()、unshift()、splice()、sort()、reverse()这几种数组方法却没问题呢?

官方解释:Vue 将被侦听的数组的变异方法进行了包裹,所以它们也将会触发视图更新。

怎么包裹?其实就是改写了,采用hack,实施奇技淫巧:

修改效果,也就是把字符串push指向方法Array.prototype.push,其他以此类推:字符串->方法

第二缺点:只能劫持对象的属性

案例:

Object.defineProperty只能劫持对象的属性,即key,在obj2中,num和text属于value里面的属性,而Object.defineProperty无法劫持value,也就无法跟踪num和text的变化。简单一点就是:当属性的值是引用的时候,Object.defineProperty不起作用。

怎么办?递归,深度遍历。

欢迎关注。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表