可以从 Vue 'outside'计算/监视属性吗？

我正试图了解Vue中的反应性，以及如何/是否可以将其用于我自己的库和其他库中未在Vue组件中声明的对象中的嵌套属性。

下面是一个试图使用compute的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)

但似乎什么都不起作用(文本输出没有更新(。我开始怀疑我是否在尝试做一些我不该做的事情。

如果您希望将外部库集成到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://v2.vuejs.org/v2/api/#Vue-可观察

希望这能有所帮助！

在Vue 3中，您可以使用ref()或reactive():

import { reactive } from 'vue';
const state = reactive({ count: 0 });

相关内容

最新更新

热门标签：