当一个 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成了实例的一个属性,但是对它的任何修改将不是响应式

Logo

前往低代码交流专区

更多推荐