Блог

1-й подход

 <script>
  export default {
    data(){
      return {
        data1: "some data",
        data2: "some more data"
      }
    },
    methods: {
      dataActions(){
        this.data1 = "new data";
      }
    }
  }
</script>
 

2-й подход

 <script>
  let data1 = "some data";
  let data2 = "some more data";

  export default {
    methods: {
      dataActions(){
        data1 = "new data";
      }
    }
  }
</script>
 

какой из них я должен предпочесть, предполагая, что данные не используются <template> .

влияет ли это на мой код?

Я знаю, что данные в свойстве data изменяют значения. Но должен ли я использовать 2-й подход, если я не хочу изменять значения?

и могу ли я передать data1 во 2-м подходе в качестве реквизита для компонентов?

data не для изменения значений — это для реактивных значений.

Если вы хотите, чтобы ваша страница повторно отображалась при изменении переменной, затем поместите ее в data

В противном случае держите его снаружи — изменяемым или иным.

Например, если ваш шаблон использует любую из этих переменных, то data это подходящее место для них.

props хорошо передавать данные в компонент. Но если страница будет повторно отображена, компонент будет повторно инициализирован.