javascript - 原型(prototype)继承的属性在 vue.js 中不是 react 性的？

Question

我有这个代码。这纯粹是为了实验目的:

test.html

<div id="example-1">
    {{ stuff.dosobject.notlist }}
    <button v-on:click="dostuff">DO STUFF</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="test.js"></script>

test.js

var oneobject={
        dosobject:{
            notlist:"foo"  
        }
    }

var stuff = Object.create(oneobject)

var example1 = new Vue({
  el: '#example-1',
  data: {
    stuff:stuff
  },
  methods:
  {
      dostuff:function(event)
      {
          if(stuff.dosobject.notlist=="foo")
              stuff.dosobject.notlist="bar"
          else
              stuff.dosobject.notlist="foo"
      }
  }
})

对象 stuff 是以 oneobject 作为原型(prototype)创建的。我希望属性 stuff.dosobject.notlist 是 react 性的，即模板的 {{ stuff.dosobject.notlist }} 部分在按钮被点击。

好像不是这样的

我做错了什么吗？还是正常的 VueJS 行为？

稍微考虑一下，不让所有原型(prototype)属性都响应式似乎并不奇怪，因为原型(prototype)链可能会很长并导致性能问题。

Answer 1

通常，绕过这些类型的 react 性警告的方法是使用 Vue.set :

Adds a property to a reactive object, ensuring the new property isalso reactive, so triggers view updates. This must be used to add newproperties to reactive objects, as Vue cannot detect normal propertyadditions (e.g. this.myObject.newProperty = 'hi').

但是，Vue.set 包含以下检查:

https://github.com/vuejs/vue/blob/4f81b5db9ab553ca0abe0706ac55ceb861344330/src/core/observer/index.js#L212-L215

if (key in target && !(key in Object.prototype)) {
 target[key] = val
 return val
}

我已经阅读并重读了 Reactivity in Depth ，其中指出:

When you pass a plain JavaScript object to a Vue instance ... (emphasis mine)

所以很明显你不应该传递复杂的对象并期望 react 性起作用。然而，原型(prototype)继承是“普通”对象的一部分，当您使用类、第三方库或大型、复杂的代码库时，处理作为 props 或数据传递的“非普通”对象有时是不可避免的。

通过使用 Vue.set 来“使响应式(Reactive)”现有对象会很好，但是由于 in 检查，它不会复制原型(prototype)值到对象并在其上设置响应式(Reactive) getter/setter 对。

您可以尝试以下两种解决方案:

1. 克隆对象而不是继承对象，确保stuff 具有dosobject 作为own property .

2. 触发器 $forceUpdate当您在 stuff 上设置任何属性，或创建一个 proxy让 stuff 在 set 陷阱中自动完成。

---

在我们遇到的边缘情况下，我们设置了一个函数来确保我们设置的更改被 Vue 的 react 系统获取:

function setPropertyReactive(obj, key, value) {
  if (obj.hasOwnProperty(key)) {
    obj[key] = value;
    return;
  }

  delete Object.getPrototypeOf(obj)[key];
  Vue.set(obj, key, value);
}