可以从Vue的 "外部 "计算手表属性吗？

Question

我正试图了解Vue中的反应性，以及我如何能在我自己的和其他库的对象中使用嵌套属性，而这些对象并没有在Vue组件中声明。

这里有一个JS fiddle试图使用compute。http:/jsfiddle.net73r9bk2t1

<div id="app">
  {{item}}
</div>


var someExternalObject = { thing: 'some value' }

var vm = new Vue({
  el: '#app',
  computed: {
    item() {
      return someExternalObject.thing;
    }
  },
})

setTimeout(() => {
  someExternalObject.thing = 'new value';
  console.log(someExternalObject.thing);
}, 1000)

这里是另一个试图使用$watchhttp:/jsfiddle.net73r9bk2t2

<div id="app">
  {{item}}
</div>

someExternalObject = { thing: 'some initial text' }

var vm = new Vue({
  el: '#app',
  computed: {
    item() {
      return someExternalObject.thing;
    }
  },
  created()
  {
    // Give the external object a scoped reference
    this.someExternalObject = someExternalObject;

    this.$watch('someExternalObject.thing', function (newVal, oldVal)
        {
            console.log("Watched:", newVal, oldVal);
        }, { deep: true, immediate: true }); 
  }
})

setTimeout(() => {
  someExternalObject.thing = 'some updated text';
  console.log(someExternalObject.thing);
}, 1000)

但似乎没有任何工作（文本输出没有更新）。我开始怀疑我是否在尝试做一些我不应该做的事情。

Answer 1

如果你想把一个外部库集成到Vue中，并使其成为反应性的，那么你应该考虑使用 Vue.observable. 它将让你在Vue实例之外创建一个反应式对象。

const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}

https:/vuejs.orgv2api#Vue-observable。

希望对大家有所帮助!