Почему мы сохраняем экземпляр Vue в переменной или константе?

Question

Я новичок в Vue. В большинстве учебных пособий и документации я видел, что экземпляр new Vue сохраняется в app или в любой другой именованной константе. Мне было интересно, как сохранить экземпляр Vue в переменной или постоянной справке?

const app = new Vue({
  el: "#app",
  components: {},
  methods: {}
  // options
})

Answer 1

Это зависит от вашего варианта использования.

Одна из причин может заключаться в том, что у вас уже развернуто приложение в рабочей среде. Вы можете добавить Vue. js только к некоторым частям приложения. У вас даже может быть несколько экземпляров vue на одной странице, поэтому сохранение ссылки на них имеет смысл.

Другая причина - использовать глобальную шину событий. При реализации этого вы сохраните ссылку на новый компонент Vue. Аналогично этому:

Vue.prototype.$eventBus = new Vue();

Answer 2

Думаю, у меня есть вариант использования. Думаю, это проясняет и мой вопрос.

Обратите внимание, что мы не можем использовать стрелочные функции в свойстве опций или обратном вызове, например created: () => console.log(this.a) или vm.$watch('a', newValue => this.myMethod()). Поскольку стрелочная функция не имеет this, this будет обрабатываться как любая другая переменная и лексически просматриваться через родительские области до тех пор, пока не будет найдена, что часто приводит к ошибкам, например Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

Но, если мы используем стрелочную функцию со свойством data, это не будет экземпляр компонента, но мы все равно можем получить доступ к экземпляру как к первому аргументу функции:

var data = { a: 1 }

// direct instance creation
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// must use function when in Vue.extend()
var Component = Vue.extend({
  data: vm => ({ a: vm.myProp })
})

Но это не обычная практика. Обычно мы объявляем свойство данных в компонентах как функции, чтобы иметь прямой доступ к экземпляру vue.

// must use function when in Vue.extend()
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})