VUE中数据无法双向绑定的情况
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值,但是遇到以下情况不会进行数据的双向绑定。Object.freeze()var obj = {foo: 'bar'}Object.freeze(obj)new Vue({el: '#app',...
·
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data
对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值,但是遇到以下情况不会进行数据的双向绑定。
Object.freeze()
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
这里借用官网的例子,当你在你的响应式系统中使用了Object.freeze()方法;
该方法有三个特点:
-
使对象不可扩展,无法向其添加新属性。
-
为对象的所有属性将 configurable 特性设置为 false。在 configurable 为 false 时,无法更改属性的特性且无法删除属性。
-
为对象的所有数据属性将 writable 特性设置为 false。当 writable 为 false 时,无法更改数据属性值。
数据未在实例中进行初始化
在vue中当数据改变时,视图会进行重渲染。但是只有当实例被创建时 data
中存在的属性才是响应式的。也就是说如果你添加一个新的属性在created生命周期完成后,那么数据将无法进行绑定,如直接使用vm.a="xxx",虽然a成了实例的一个属性,但是对它的任何修改将不是响应式的
更多推荐
已为社区贡献1条内容
所有评论(0)