可以从 'outside' Vue compute/watch 属性吗？

Question

我正在努力研究 Vue 中的反应性，how/if我可以将它用于我自己的对象和其他未在 Vue 组件中声明的库的对象中的嵌套属性。

这是一个试图使用计算的 JS fiddle： http://jsfiddle.net/73r9bk2t/1/

<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)

这是另一个尝试使用 $watch http://jsfiddle.net/73r9bk2t/2/

<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.org/v2/api/#Vue-observable

希望对您有所帮助！

可以从 'outside' Vue compute/watch 属性吗？

Possible to compute/watch property from 'outside' Vue?

watch

vue.js

可以从 'outside' Vue compute/watch 属性 吗？

Possible to compute/watch property from 'outside' Vue?

watch

vue.js

可以从 'outside' Vue compute/watch 属性吗？