Определение того, когда использовать подходы к структуре данных в Vue.js

Question

Я сейчас просматриваю документацию Vue.js v2 и чувствую, что столкнулся с конфликтом при структурировании данных. В официальной документации для создания данных используются следующие данные:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

Но при просмотре видео на Vue JS Crash Course 2019 оратор использует следующий подход:

  export default {
    name: "app",
    data() {
      return {
        data: data
      }
    }
  }

• Являются ли оба эти подхода действительными на сегодня для Vue.js в 2019 году? Если да, то когда мы используем их в каких средах?

• Кроме того, почему во втором примере я не могу присвоить его определенному идентификатору элемента, как в первом примере?

• В документации много говорится об использовании new Vue, но я не видел этого использованного в учебнике export default. Можно ли это сделать? с целью использования JavaScript для манипулирования объектами? например:

  new Vue({
    data: {
      a: 1
    },
    created: function () {
      // `this` points to the vm instance
      console.log('a is: ' + this.a)
    }
  })
  // => "a is: 1"
  

Спасибо, что прошли через это со мной, так что я получил общее представление о том, когда использовать любой из подходов.

Answer 1

1. Вы используете new Vue() в файлах JavaScript и export default {…} в файлах Vue с расширением .vue.Инструмент сборки преобразует файл Vue в JavaScript, а код преобразуется в компоненты Vue.
2. Обычно используется однокомпонентный файл Vue, но вы можете использовать синтаксис Vue(), если не хотите использоватьинструменты сборки.
3. В файле Vue вы создаете один компонент.Если вы хотите делать манипуляции, вы должны делать это внутри компонента, нет необходимости назначать компонент переменной.
4. Вы можете использовать new Vue() и файлы Vue вместе, но я думаю, что лучше придерживатьсяв одном образе мышления.Я рекомендую использовать файлы Vue с синтаксисом export default {…}.