小猿圈解析vue数据双向绑定的缺点

vue是当今前端很流行的一种框架，可是vue也是有必定的缺陷的，你有过了解吗？下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷，但愿对你有所帮助，下面咱们一块儿了解一下吧。

一、vue 实例建立后，再向其上添加属性，不能监听

当建立一个Vue实例时，将遍历全部DOM对象，并为每一个数据属性添加了get和set。get和set 容许Vue观察数据的更改并触发更新。可是，若是你在Vue实例化后添加（或删除）一个属性，这个属性不会被vue处理，改变get和set。

若是你不想建立一个新的对象，你可使用Vue.set设置一个新的对象属性。该方法确保将属性建立为一个响应式属性，并触发视图更新：

function addToCart (id) {
var item = this.cart.findById(id);
if (item) {
item.qty++
} else {
// 不要直接添加一个属性，好比 item.qty = 1
// 使用Vue.set 建立一个响应式属性
Vue.set(item, 'qty', 1)
this.cart.push(item)
}
}
addToCart(myProduct.id);

二、数组

Object.defineProperty的一个缺陷是没法监听数组变化。

当直接使用索引(index)设置数组项时，不会被vue检测到：

app.myArray[index]=newVal;
然而Vue的文档提到了Vue是能够检测到数组变化的，可是只有如下八种方法,vm.items[indexOfItem]=newValue这种是没法检测的。

push();
pop();
shift();
unshift();
splice();
sort();
reverse();

一样可使用Vue.set来设置数组项：

Vue.set(app.myArray,index,newVal);

三、proxy与defineproperty

Proxy对象在ES2015规范中被正式发布,用于定义基本操做的自定义行为（如属性查找，赋值，枚举，函数调用等）。

它在目标对象以前架设一层“拦截”，外界对该对象的访问，都必须先经过这层拦截，所以提供了一种机制，能够对外界的访问进行过滤和改写。

咱们能够这样认为,Proxy是Object.defineProperty的全方位增强版,具体的文档能够查看此处;

Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等，是Object.defineProperty不具有的。

Proxy返回的是一个新对象,咱们能够只操做新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改。

Proxy做为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利。
固然,Proxy的劣势就是兼容性问题,并且没法用polyfill磨平,所以Vue的做者才声明须要等到下个大版本(3.0)才能用Proxy重写。

以上就是小猿圈web前端讲师给你们分享的vue数据双向绑定的缺点，正在学习前端的或者已处工做岗位的小伙伴们有所了解了吗？但愿对大家们有所帮助，想要了解更多内容的小伙伴能够登陆小猿圈官网了解。