扣丁学堂HTML5培训简述vue数据双向绑定的缺陷

本篇文章扣丁学堂HTML5培训小编给读者们分享一下vue数据双向绑定的缺陷，对vue数据双向绑定的缺陷或者是对HTML5开发技术感兴趣的小伙伴就随小编来了解下吧。

扣丁学堂HTML5培训

1、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);

2、数组

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);

3、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重写。

以上就是扣丁学堂HTML5在线学习小编给大家分享的vue数据双向绑定的缺陷，希望对小伙伴们有所帮助，想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。

想要学好HTML5开发小编给大家推荐口碑良好的扣丁学堂，扣丁学堂有专业老师制定的HTML5学习路线图辅助学员学习，此外还有与时俱进的HTML5视频教程供大家学习，想要学好HTML5开发技术的小伙伴快快行动吧。

H5进阶课程：https://ke.qq.com/course/387348?flowToken=1008605【扫码进入前端H5架构师进阶VIP体验课】

H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

注：点击(了解更多)进入课程直播间