Javascript vue.js中的原型继承属性不是被动的？

我有这个密码。这纯粹是为了实验目的：

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>

对象

stuff

是使用

oneobject

作为原型创建的。 我希望属性

stuff.dosobject.notlist

是被动的，即当单击按钮时，模板的

{{{stuff.dosobject.notlist}}

部分将被重新呈现

事实似乎并非如此

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

---

仔细考虑后，不让所有原型属性都是反应性的似乎并不奇怪，因为原型链可能相当长，并会导致性能问题。

通常，您绕过这些类型的反应性警告的方法是使用：

将属性添加到反应对象，确保新属性 也是被动的，因此触发视图更新。这必须用于添加新的 属性，因为Vue无法检测正常属性 添加内容（例如，

this.myObject.newProperty='hi'

）

但是，

Vue.set

包含以下检查：

我读了又读，上面写着：

将普通JavaScript对象传递给Vue实例时。。。（强调矿山）

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

通过使用

Vue.set

“生成反应式”现有对象会很好，但由于检查中的

，它不会将原型值复制到对象并在其上设置反应式getter/setter对

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

克隆对象而不是从对象继承，确保
stuff
将
dosobject
作为对象


在
stuff
上设置任何属性时触发，或者为
stuff
创建一个属性，以便在
设置
陷阱中自动执行该操作



在我们遇到的一个边缘案例中，我们设置了一个功能，以确保我们设置的更改被Vue的反应系统拾取：

函数setPropertyResactive（对象、键、值）{
if（对象hasOwnProperty（键））{
obj[键]=值；
返回；
}
删除Object.getPrototypeOf（obj）[key]；
Vue.set（对象、键、值）；
}
您希望Vue检测到对象的更改吗？例如，
对象。原型
？来自：“对象必须是普通对象：忽略浏览器API对象和原型属性等本机对象。”只需执行以下操作：填充：oneobject@destoryer：嗯，事实上，医生很清楚，我错过了。我不希望Vue监视Object.prototype更改否，但我希望能够以面向对象的方式在数据模型中组织对象。尽管如此，我知道很难决定在原型链中的反应性线在哪里，所以我理解设计决策。可能是我对数据模型的思考方式尚未优化
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"
      }
  }
})

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