Руководство по началу работы с Vue3 — основное использование

Vue.js

Наконец, после более чем двух лет разработки и усилий многих участников была выпущена официальная версия Vue3. Благодаря мудрости и усилиям многих выдающихся разработчиков Vue3 суждено стать следующей основной средой разработки интерфейсов. Эта статья поможет вам шаг за шагом изучить и понять использование vue3, конечно, это больше о моем процессе обучения.

Внешний интерфейс такой, вам нужно постоянно учиться, а новые технологии производятся каждый месяц. Если каждое знание изучается, это, очевидно, нереально, поэтому должно быть выборочное обучение. Например, три основных фреймворка, Vue/React/angular, и фреймворки расширений, основанные на этих трех фреймворках, должны быть вовлечены и поняты.

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

Конечно, эта статья больше о том, как его использовать.О том, почему код используется таким образом, и каков принцип, я дам промежуточное объяснение использования после того, как у меня будет глубокое понимание этого позже.

Как говорится, лучше читать от руки, чем от руки. Я надеюсь, что вы все еще можете сбить его самостоятельно. углубить впечатление.

Предварительное знание

Хотя я объясняю спорадические точки знаний и использование API, вам все равно необходимо освоить следующие точки знаний, чтобы учиться и понимать.

  • TypeScript — простое использование, которое вы знаете и можете использовать
  • Основы Vue2.0 — у вас должен быть как минимум опыт работы с Vue2.0
  • Вы должны иметь возможность использовать npm или yarn для установки зависимостей.

Конечно, если у вас нет вышеупомянутых предварительных знаний. Вы можете ознакомиться с базовыми примечаниями vue2.0 — расширенными примечаниями в Nuggets или в моей статье, TypeScript можно посетить на официальном сайте, чтобы легко изучить и использовать его.

Некоторые новые функции Vue3.0

  • Vue3 обратно совместим, Vue3 поддерживает большинство функций Vue2. Нет проблем в разработке Vue3 с синтаксисом Vue2.
  • Повышение производительности, уменьшение размера пакета на 41 %, ускорение начальной визуализации на 55 %, ускорение обновления на 133 % и сокращение использования памяти на 54 %.
  • Недавно запущенный Composition API, проблема, возникающая в Vue2, заключается в том, что код сложных компонентов становится очень проблематичным и даже непригодным для сопровождения. Как только Composition API запустили, он сразу решил эту проблему, это набор из серии API.
  • Другие новые функции: Teleport (телепорт компонентов), Suspense (решение проблемы асинхронной загрузки компонентов), а также глобальные модификации и оптимизации API.
  • Улучшенная поддержка TypeScript

Официальное видео конференции Vue3 на станции B

Используйте среду разработки vue-cli для сборки vue3

Vue-cli ：Vue.js 开发的标准工具 ， 新版的 vue-cli 还提供了图形界面，如果你对命令行陌生，也可以使用图形界面。

Я не буду здесь подробно описывать конкретные этапы установки. Официальный сайт полный и понятный. вставьте сюдаАдрес официального сайта

Введение в основной каталог проекта

|-node_modules       -- 所有的项目依赖包都放在这个目录下
|-public             -- 公共文件夹
---|favicon.ico      -- 网站的显示图标
---|index.html       -- 入口的html文件
|-src                -- 源文件目录，编写的代码基本都在这个目录下
---|assets           -- 放置静态文件的目录，比如logo.pn就放在这里
---|components       -- Vue的组件文件，自定义的组件都会放到这
---|App.vue          -- 根组件，这个在Vue2中也有
---|main.ts          -- 入口文件，因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts   -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性
|-.eslintrc.js       -- Eslint的配置文件，不用作过多介绍
|-.gitignore         -- 用来配置那些文件不归git管理
|-package.json       -- 命令配置和包管理文件
|-README.md          -- 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json      -- 关于TypoScript的配置文件
|-yarn.lock          -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中

входной файл main.ts

import { createApp } from "vue"; // 引入vue文件，并导出`createApp`
import App from "./App.vue"; // 引入自定义组件，你在页面上看的东西基本都在这个组件里

createApp(App).mount("#app"); // 把App挂载到#app节点上，在public目录下的index.html找节点

Введение в использование API композиции

Использование setup() и ref()

Используя новый синтаксис setup(), запись этого не требует записи данных, как предыдущий синтаксис vue2.

<template>
  <div>
    <h2>vue3新语法</h2>
    <div>{{girl}}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    const girl = ref('番茄女孩');
    return {
      girl
    };
  },
});
</script>

Переменные, объявленные в Vue2, должны быть объявлены в DATA. Переменные объявляются через REF в Vue3 и возвращаются функцией Setup для использования на странице.

Изменение переменных в данных в vue2 требует определения методов в методах. Затем переменная модифицируется триггером события. Так как же vue3 определяет методы и изменяет переменные, объявленные ref?

<template>
  <div>
    <h2>vue3新语法</h2>
    <div>{{girl}}</div>
    <button @click="changeGirls">改变我的女孩</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    const girl = ref('番茄女孩');
    const changeGirls = () => {
    	girl.value = '番茄男孩'
    }
    return {
      girl,
      changeGirls
    };
  },
});
</script>

Да, вы не ошибаетесь. Переменные, объявленные через ref, должны быть назначены и прочитаны через переменную .value при назначении. И методы событий больше не нужно объявлять в методах. Вместо этого его можно записать прямо в функцию настройки. Это очень просто. И сохранить много кода. Однако изменения в переменных, объявленных ref, должны быть изменены с помощью переменной .value. Это очень несовместимо с использованием нашего предыдущего кода. Тогда реактивный метод, описанный ниже, соответствует нашему предыдущему использованию.

reactive()

Это также функция (метод), и параметр, который она принимает, является объектом (объектом).

Как переменные, так и методы могут использоваться в качестве свойства в Object, и нет необходимости добавлять раздражающее свойство value при изменении значения changeGirls. Когда вы вернетесь, вам не нужно возвращать по одному, вам нужно только вернуть данные, и все.

<template>
  <div>
    <h2>vue3新语法</h2>
    <div>{{ data.girl }}</div>
    <button @click="data.changeGirls">改变我的女孩</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    const data = reactive({
      girl: "番茄女孩",
      changeGirls: () => {
        data.girl = "番茄男孩";
      },
    });

    return {
      data,
    };
  },
});
</script>

Этот способ написания кажется более кратким, чем использование ref. Теперь в шаблоне данные должны быть добавлены перед каждой выходной переменной. Все равно немного неудобно. Итак, как вы можете писать свойства напрямую, как vue2. Возможно, вы думаете о способах использования оператора распространения. Но после этой деконструкции она становится обычной переменной и больше не имеет возможности реагировать. Решение этой проблемы заключается в использовании новой функции toRefs() из vue3.

toRefs()

<template>
  <div>
    <h2>vue3新语法</h2>
    <div>{{ girl }}</div>
    <button @click="changeGirls">改变我的女孩</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    const data = reactive({
      girl: "番茄女孩",
      changeGirls: () => {
        data.girl = "番茄男孩";
      },
    });

    return {
      ...toRefs(data),
    };
  },
});
</script>

关于何如选择使用ref()和recative()Похоже, что это отличается только способом написания, а конкретную производительность и другие аспекты нужно проверить позже. Но я сам предпочитаю использовать реактивный синтаксис.

Добавление аннотаций типа к данным

Поскольку используется синтаксис машинописного текста. Когда мы пишем код и методы, мы должны стандартизировать и писать в соответствии с синтаксисом TS.

<template>
  <div>
    <h2>vue3新语法</h2>
    <div>{{ girl }}</div>
    <button @click="changeGirls">改变我的女孩</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
interface DataProps {
  girl: string;
  changeGirls: () => void;
}
export default defineComponent({
  name: "App",
  setup() {
    const data: DataProps = reactive({
      girl: "番茄女孩",
      changeGirls: () => {
        data.girl = "番茄男孩";
      },
    });

    return {
      ...toRefs(data),
    };
  },
});
</script>

Жизненный цикл и хуки vue3.x

setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
onActivated(): 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数（不太会用。还在了解中）

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

 Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

Благодаря этому сравнению легко увидеть, что функция ловушки vue3 в основном добавляет on на основе vue2, но есть также две измененные функции ловушки.

  • BeforeDestroy становится onBeforeUnmount
  • уничтожено стало onUnmounted

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

  • Отслеживание состояния onRenderTracked

Дословный перевод onRenderTracked — это отслеживание состояния, которое отслеживает состояние всех отзывчивых переменных и методов на странице, то есть значение, которое мы возвращаем при возврате, он и будет отслеживать. Пока на странице есть обновление, он будет его отслеживать, а затем сгенерирует объект события, который мы используем для поиска проблемы программы.

  • Триггеры состояния onRenderTriggered

OnrenderGrigger Cradeded - это триггер состояния, он не отслеживает каждое значение, но дает вам значение изменений, а новые и старые значения дадут вам четкое шоу.

<template>
  <div>
    <h2>vue3新语法</h2>
    <div>{{ girl }}</div>
    <button @click="changeGirls">改变我的女孩</button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onRenderTracked,
  onRenderTriggered,
} from "vue";
interface DataProps {
  girl: string;
  changeGirls: () => void;
}
export default defineComponent({
  name: "App",
  setup() {
    const data: DataProps = reactive({
      girl: "番茄女孩",
      changeGirls: () => {
        data.girl = "番茄男孩";
      },
    });
     onRenderTracked((e) => {
       console.log(e);
       console.log("状态跟踪");
     });
    onRenderTriggered((e) => {
      console.log(e);
      console.log("状态跟踪");
    });
    return {
      ...toRefs(data),
    };
  },
});
</script>

Лично я считаю, что onRenderTriggered следует использовать больше в будущем. А onRenderTracked, скорее всего, будет использоваться, когда вам нужно отслеживать все свойства, когда вы не знаете, где произошла ошибка. Эти две функции очень похожи на часы? Давайте узнаем, как использовать часы в vue3.

Использование и меры предосторожности с часами в vue3

<template>
  <div>
    <h2>vue3新语法</h2>
    <div>{{ girl }}</div>
    <div>{{ boy }}</div>
    <button @click="changeGirls">改变我的女孩</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch, ref } from "vue";
interface DataProps {
  girl: string;
  changeGirls: () => void;
}
export default defineComponent({
  name: "App",
  setup() {
    const boy = ref("我是男孩");
    const data: DataProps = reactive({
      girl: "番茄女孩",
      changeGirls: () => {
        data.girl = "番茄男孩";
        boy.value = data.girl;
      },
    });
    watch(boy, (newvalue, oldvalue) => {
      console.log(newvalue);
      console.log(oldvalue);
    });
    return {
      ...toRefs(data),
      boy,
    };
  },
});
</script>

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

<template>
  <div>
    <h2>vue3新语法</h2>
    <div>{{ girl }}</div>
    <div>{{ boy }}</div>
    <button @click="changeGirls">改变我的女孩</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch, ref } from "vue";
interface DataProps {
  girl: string;
  changeGirls: () => void;
}
export default defineComponent({
  name: "App",
  setup() {
    const boy = ref("我是男孩");
    const data: DataProps = reactive({
      girl: "番茄女孩",
      changeGirls: () => {
        data.girl = "番茄男孩";
        boy.value = data.girl;
      },
    });
    watch([boy, () => data.changeGirls], (newvalue, oldvalue) => {
      console.log(newvalue);
      console.log(oldvalue);
    });
    return {
      ...toRefs(data),
      boy,
    };
  },
});
</script>

Vue3 это мониторинг использования. Хотя часы могут запускаться после изменения соответствующего свойства или метода. Однако при изменении переменной производится соответствующая обработка события. Я не могу придумать лучшего способа судить. Кто знает, может рассказать в комментариях.

Модульное использование в vue3

Мы можем узнать из приведенного выше случая. Если позже в текущем компоненте будет объявлено больше переменных и методов. Еще увеличится объем кода и читабельность. В настоящее время мы можем извлечь некоторые коды и методы с низкой связанностью в качестве модуляризации. На него можно напрямую ссылаться в компоненте, который необходимо использовать. Например, компонент времени

// src/hooks/timeHooks.ts
import { ref } from 'vue'


const nowTime = ref('00:00:00')
const setNowTime = () => {
    nowTime.value = new Date().toString()
}

export {
    nowTime,
    setNowTime
}

<template>
  <div>
    <h2>vue3新语法</h2>
    <div>{{ nowTime }}</div>
    <button @click="setNowTime">现在时间</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { nowTime, setNowTime } from "../hooks//timeHook";

export default defineComponent({
  name: "App",
  setup() {
    return {
      nowTime,
      setNowTime,
    };
  },
});
</script>

Теперь мы можем видеть эту манеру намного лучше, чем в vue2, больше не используемую в качестве примесей (смешанных) намного лучше.

Компоненты телепорта

Я называю эту функцию независимыми компонентами, она может монтировать компоненты, которые вы пишете, в любой DOM, который вы хотите монтировать, поэтому она очень свободна и независима. Это невозможно при использовании Vue2.


// 在/src/components/目录下，创建一个Modal.vue的组件
<template>
  <teleport to="#modal">
    <div id="center">
      <h2>只会番茄炒蛋</h2>
    </div>
  </teleport>
</template>
<script lang="ts">
export default {};
</script>
<style>
#center {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background: white;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}
</style>

Затем мы открываем /public/index.html и добавляем узел модели.

<div id="app"></div>
<div id="modal"></div>

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

Компоненты подвески

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

<template>
  <div>
    <Suspense>
      <template #default>
      	// 请求回来展示，AsyncComponent组件中有异步请求。
         <AsyncComponent />
      </template>
      <template #fallback>
      	// 请求中和失败展示
        <h1>Loading...</h1>
      </template>
    </Suspense>
  </div>
</template>

Вышеизложенное — мои заметки по изучению некоторого содержимого vue3. Последующее исследование все еще продолжается. Вы можете обратиться к одному или двум

❤️ Сделайте себе одолжение после прочтения

Если вы найдете этот контент вдохновляющим, я хотел бы пригласить вас сделать мне небольшую услугу:

  1. подобно, чтобы больше людей могли увидеть этот контент.

  2. Обратите внимание на паблик-аккаунт "Tomato Science Front End", Я буду регулярно обновлять и публиковать информацию о внешнем интерфейсе и опыт реализации проекта для вашего ознакомления.

  3. добавить в друзья, Хотя это не может вам сильно помочь, вы можете обсудить и обменяться некоторыми деловыми вопросами.

Категории