小猿圈解析vue数据双向绑定的缺陷
对web前端了解的同学会知道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;
然而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重写。
以上就是小猿圈web前端讲师给大家分享的vue数据双向绑定的缺陷,希望对小伙伴们有所帮助,想要了解更多内容的小伙伴可以登录小猿圈官网了解。
- vue.js双向数据绑定原理解析及模拟demo的实现
- 全面解析vue中的数据双向绑定
- vue数据双向绑定原理解析(get & set)
- 详解Vue双向数据绑定原理解析
- vue源码解析之--数据双向绑定
- Vue双向数据绑定原理解析
- Vue双向数据绑定原理解析
- Vue.js双向数据绑定原理及生命周期详解
- 在 vuex 中使用 vux 的 popup 数据双向绑定
- Vue数据双向绑定原理及简单实现方法
- Vue 双向数据绑定原理分析 以及 Object.defineproperty语法
- vue中数据双向绑定的实现原理
- vue父组件和子组件通过sync实现双向数据绑定
- vue双向数据绑定的原理解密
- vue实现数据双向绑定原理剖析
- VUE如何提交Table数据(解决相同属性多条数据不能双向绑定的问题)
- 【VUE】IView.js下拉框数据双向绑定
- Vue 2.0学习笔记:实现组件数据的双向绑定
- VUE v-model表单数据双向绑定完整示例
- vue数据间prop的双向数据绑定