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

最新推荐文章于 2023-09-26 20:43:34 发布

加加乐乐

最新推荐文章于 2023-09-26 20:43:34 发布

阅读量1.1k

点赞数 1

分类专栏：小猿圈web 文章标签：前端学习 vue数据绑定前端框架

本文链接：https://blog.csdn.net/qq_42210792/article/details/90899995

版权

本文探讨了Vue框架在数据双向绑定方面的局限性，包括Vue实例创建后新增属性无法监听、数组变化检测的限制以及Proxy与Object.defineProperty的对比。Vue在数组操作和属性动态添加时需要使用特定方法以确保响应式更新，而Proxy作为更强大的替代方案，受限于兼容性问题尚未广泛应用于Vue中。

摘要由CSDN通过智能技术生成

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

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;