玖叶教程网

前端编程开发入门

Vue-给对象新增属性或者数组内部元素更改(使用Vue.$set())

在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。

根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新

受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

通俗用法如下:

vue.$set(数组或者对象,下标或者对象内的属性);

主要是由于使用es5的Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。这个方法的局限性导致的,后面的vue3.x将采用es6的proxy来实现,将不会有这种问题

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言