Перенеситесь с vue2 на vue3 за 10 минут

Взгляните на новую структуру кода Vue3

Цель этой статьи — познакомить людей, уже имеющих опыт работы с Vue2, с тем, как писать Vue3.

Поэтому в этой статье предполагается, что вы уже знакомы с ядром Vue, и мы познакомим вас только с тем, что вам нужно знать для написания кода Vue3.

Три способа написания скрипта в Vue3

Во-первых, Vue3 представляет новую функцию под названием Composition API, которая предоставляет новый способ организации логики внутри компонентов. В результате теперь есть три способа написания кода в теге <script> в Vue3:

1. Самый простой синтаксис Vue2.

<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    add 1
  </button>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    onClick() {
      this.count += 1;
    },
  },
}
</script>

2. настройка()

<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    add 1
  </button>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    let count = ref(1);
    const onClick = () => {
      count.value += 1;
    };
    return {
      count,
      onClick,
    };
  },
  
}
</script>

3. `<script setup>`

<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    add 1
  </button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(1);
const onClick = () => {
  count.value += 1;
};
</script>

Как видите, как с точки зрения длины кода, так и простоты кода метод <script setup> является самой простой формой. Если вы знакомы с Vue, я рекомендую использовать метод <script setup>. Такой подход сделал Vue3 моим любимым фреймворком для интерфейса.

Если вы новичок во фронтенд-разработке, рекомендую начать с первого способа. Это требует меньшей кривой обучения, и вы можете сначала изучить основы использования Vue, а затем быстро изучить наиболее важный контент в Vue3 на основе моей статьи.

Первый метод такой же, как и в Vue2, поэтому мы не будем вдаваться в подробности. Второй метод требует, чтобы все объекты и методы были возвращены до того, как их можно будет использовать, что может быть многословным. За исключением старых проектов, я не рекомендую изучать этот метод лично. Пока не планирую углубляться в эту часть.

Поэтому мы в основном сосредоточимся на <script setup>, который является синтаксисом для понимания в этом подходе. Обратите внимание, что <script setup> по сути является синтаксическим сахаром для второго метода, поэтому, если вы освоите этот подход, вы, по сути, сможете использовать и второй метод.

Как писать компоненты с помощью ‹настройки скрипта›

Изучение Vue3 не означает, что вам нужно изучать новую технологию. Философия разработки, лежащая в основе Vue3, ничем не отличается от философии Vue2.
Разница между Vue3 и Vue2 — это то же самое, что сказать одно и то же на другом языке или диалекте.
Итак, нам нужно позаботиться о том, как для записи контента в Vue2 способом Vue3.

1. `data` — единственное, что требует внимания

Единственное, что вам нужно помнить обо всей data части, это вот что.
Свойства, которые ранее создавались в данных, теперь все объявляются с помощью ref().
Используйте его непосредственно в шаблоне и не забудьте добавить .value к сценарий.
Я написал простой пример в начале, так что давайте сравним его напрямую.

1). Сравнение методов записи vue2 и vue3

 // Vue2 way of writing code.

<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    add 1
  </button>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    onClick() {
      this.count += 1;
    },
  },
}
</script>
// Vue3 way of writing code.

<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    add 1
  </button>
</template>

<script setup>
import { ref } from 'vue';

 // Declare in this way
const count = ref(1);

const onClick = () => {
   // Remember to add .value when using
  count.value += 1;
};
</script>

2).Notes — API умственного бремени композиции

Ref и Reactive

В Vue3 также есть API под названием reactive. Тем не менее, мое предложение состоит в том, что вам не нужно заботиться об этом. В большинстве случаев ref достаточно.

Когда использовать обертку ref(), а когда нет. Использовать или нет ref зависит от того, нужно ли обновлять страницу при изменении значения этой переменной. Конечно, можно совершенно не заботиться об этом, как и о записи данных в прошлом. Однако при его использовании нужно постоянно использовать .value.

Не используйте деструктурирование. При его использовании не пишите, как в следующем примере, иначе вы потеряете реактивность. Другими словами, значение обновляется, но страница не обновляется.

// Vue3 way of writing code.
<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    add 1
  </button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(1);
const onClick = () => {
  // Don't write like that!
  const { value } = count;
  value += 1;
};
</script>

Примечание. Изучение Vue3 увеличивает стоимость обучения, поскольку приходится думать о подобных вещах. На самом деле, эти умственные нагрузки могут быть полностью устранены в процессе обучения.

Вот почему я рекомендую новичкам сначала изучить, как написан Vue2.

2. методы

Чтобы объявить метод события, нам просто нужно создать объект метода в теге скрипта.

Остальное так, как было написано на Vue2, и Vue3 написано так же.

Вью2:

<template>
  <div @click="onClick">
    this is vue2
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      console.log('clicked')
    },
  },
}
</script>

Vue3:

<template>
  <div @click="onClick">
    this is vue3
  </div>
</template>

<script setup>

// Note this section
const onClick = () => {
  console.log('clicked')
}

</script>

3. реквизит

Для объявления props можно использовать defineProps(), подробности смотрим в коде.

Вью2:

<template>
  <div>{{ foo }}</div>
</template>

<script>
export default {
  props: {
    foo: String,
  },
  created() {
    console.log(this.foo);
  },
}
</script>

Vue3:

<template>
  <div>{{ foo }}</div>
</template>

<script setup>

// Note here
const props = defineProps({
  foo: String
})

//use in the script tag
console.log(props.foo)
</script>

Примечание. При использовании реквизита снова будьте осторожны, чтобы не использовать деконструкцию.

<script setup>
const props = defineProps({
  foo: String
})

 // Don't write like this
const { foo } = props;
console.log(foo)
</script>

4. генерирует событие

Как и в случае с props, для объявления emits мы можем использовать defineEmits(), подробности смотрим в коде.

Вью2:

<template>
  <div @click="onClick">
    this is vue2
  </div>
</template>

<script>
export default {

  emits: ['click'],
  methods: {
    onClick() {
      this.$emit('click'); 
    },
  },
 
}
</script>

Vue3:

<template>
  <div @click="onClick">
    this is vue3
  </div>
</template>

<script setup>

// note here
const emit = defineEmits(['click']);

const onClick = () => {
  emit('click') 
}

</script>

5. вычислено

Вью2:

<template>
  <div>
    <span>{{ value }}</span>
    <span>{{ reversedValue }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 'this is a value',
    };
  },
  computed: {
    reversedValue() {
      return value
        .split('').reverse().join('');
    },
  },
}
</script>

Vue3:

<template>
  <div>
    <span>{{ value }}</span>
    <span>{{ reversedValue }}</span>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'
const value = ref('this is a value')

const reversedValue = computed(() => {
  // Using ref requires .value
  return value.value
    .split('').reverse().join('');
})

</script>

6. смотреть

В этом разделе нам нужно знать, что есть два способа записи watch в Vue3. Один заключается в использовании watch напрямую, а другой — в использовании watchEffect.
Разница между этими двумя подходами заключается в том, что

watch требует, чтобы вы явно указали переменные, от которых вы зависите, чтобы выполнить watchEffect.

С другой стороны, watchEffect автоматически реализует эффект часов на основе используемых вами переменных.

Использовать часы напрямую

Вью2:

<template>
  <div>{{ count }}</div>
  <div>{{ anotherCount }}</div>
  <button @click="onClick">
    add 1
  </button>
</template>

<script>
export default {
  data() {
    return {  
      count: 1,
      anotherCount: 0,
    };
  },
  methods: {
    onClick() {
      this.count += 1;
    },
  },
  watch: {
    count(newValue) {
      this.anotherCount = newValue - 1;
    },
  },
}
</script>

Vue3:

<template>
  <div>{{ count }}</div>
  <div>{{ anotherCount }}</div>
  <button @click="onClick">
    add 1
  </button>
</template>

<script setup>
import { ref, watch } from 'vue';

const count = ref(1);
const onClick = () => {
  count.value += 1;
};

const anotherCount = ref(0);

// Note: Here, you need to explicitly specify that the dependency is on the count variable
watch(count, (newValue) => {
  anotherCount.value = newValue - 1;
})
</script>

используйте watchEffect

Вью2:

<template>
  <div>{{ count }}</div>
  <div>{{ anotherCount }}</div>
  <button @click="onClick">
    add 1
  </button>
</template>

<script>
export default {
  data() {
    return {  
      count: 1,
      anotherCount: 0,
    };
  },
  methods: {
    onClick() {
      this.count += 1;
    },
  },
  watch: {
    count(newValue) {
      this.anotherCount = newValue - 1;
    },
  },
}
</script>

Vue3:

<template>
  <div>{{ count }}</div>
  <div>{{ anotherCount }}</div>
  <button @click="onClick">
    add 1
  </button>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(1);
const onClick = () => {
  count.value += 1;
};

const anotherCount = ref(0);

watchEffect(() => {
  // The following action is automatically triggered based on the change in count.value
  anotherCount.value = count.value - 1;
})

</script>

7. Жизненный цикл

В Vue3, помимо переименования двух хуков уничтожения в unmount, единственное, что следует отметить, это то, что хуки beforeCreate и created нельзя использовать в <script setup>.

Если вы знакомы со связанными хуками жизненного цикла, просто не забудьте использовать on в качестве префикса и сделать первую букву в setup заглавной.

API на основе опций:

<template>
  <div></div>
</template>

<script>
export default {
  beforeCreate() {},
  created() {},
  
  beforeMount() {},
  mounted() {},
  
  beforeUpdate() {},
  updated() {},
  
  // Vue2： beforeDestroy
  beforeUnmount() {},
  // Vue2： destroyed
  unmounted() {},
  
  // The other hooks are not commonly used, so they are not listed.
}
</script>

API композиции:

<template>
  <div></div>
</template>


<script setup>
import {
  onBeforeMount,
  onMounted,

  onBeforeUpdate,
  onUpdated,

  onBeforeUnmount,
  onUnmounted,
} from 'vue'

onBeforeMount(() => {})
onMounted(() => {})

onBeforeUpdate(() => {})
onUpdated(() => {})

onBeforeUnmount(() => {})
onUnmounted(() => {})
</script>

Краткое содержание

Что ж, в принципе этого достаточно, чтобы освоить Vue3.

Эта статья сама по себе не может помочь вам понять все о Vue3, но она поможет вам освоиться с тем, как написан Vue3.

Если вы хотите иметь хорошее представление о том, что такое Vue3, вам нужно самостоятельно прочитать официальную документацию по Vue3. Если вам интересны мои статьи, подпишитесь на меня, чтобы следить за серией технических статей о Vue3.

Перенеситесь с vue2 на vue3 за 10 минут

Взгляните на новую структуру кода Vue3

Три способа написания скрипта в Vue3

1. Самый простой синтаксис Vue2.

2. настройка()

3. <script setup>

Как писать компоненты с помощью ‹настройки скрипта›

1. data — единственное, что требует внимания

2. методы

3. реквизит

4. генерирует событие

5. вычислено

6. смотреть

7. Жизненный цикл

Краткое содержание

Вопросы по теме

3. `<script setup>`

1. `data` — единственное, что требует внимания