Возможно ли вычислить / посмотреть свойство извне Vue? - PullRequest
Новая
       23

Возможно ли вычислить / посмотреть свойство извне Vue?

0 голосов
/ 24 апреля 2020

Я пытаюсь обернуть голову вокруг реактивности в Vue и как / если я могу использовать ее в отношении вложенных свойств в объектах из моих собственных и других библиотек, которые не объявлены в компонентах Vue.

Вот одна JS скрипка, пытающаяся использовать вычисления: 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)

Но, похоже, ничего не работает (вывод текста не обновляется). Я начинаю задаваться вопросом, пытаюсь ли я сделать что-то, чего не должен делать.

1 Ответ

2 голосов
/ 24 апреля 2020

Если вы хотите интегрировать внешнюю библиотеку в 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 - наблюдаемый

Надеюсь, это поможет!

...