Vue在使用它时会读取对象的所有属性（并触发所有的getter）

Question

在将外部对象作为数据包含到VueJs 2.0中的组件时，我看到了一些意外的行为。显然，当将Vue设置为组件中的数据时，Vue会自动读取对象的属性，触发所有getters。

请参阅下面mounted()功能中的评论。

import { web3 } from './web3/web3-load.js'

Vue.component('home', {
  data () {
    return {
      web3: null
    }
  },

  mounted () {
    console.log(web3) // this dont call any method of the web3 object
    this.web3 = web3  // this reads the properties of web3 and triggers their getter methods      }
})

web3实际上是Web3的一个实例，并且相当复杂，它有几个子元素和子函数。

我的问题是：在预期的条件下，当将对象存储在框架内时，Vue会自动读取后面对象的所有属性吗？而且，这可以被禁用吗？

Answer 1

Vue的基本特性是将添加到数据中的对象转换为被动对象。只要将对象添加到数据，Vue就会将其所有属性转换为观察到的属性。没有办法解决这个问题。

如果您想避免这种行为，则需要创建自己的解决方法。可能会在需要时使用方法返回String ownerName = guild.getOwner().getName();对象。

IUser ownerObject = guild.getOwner()

该对象不会被反应，但您必须使用它，就好像它是一种方法（web3）。