VUE3.0 идет, все, что вы хотите узнать, здесь (1)

JavaScript Vue.js

Front-end разработка усыпана цветами, а один навык незнаком. Не знаете, с чего начать, обратите внимание на Xiaobian Shengbaishu.

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

Во всех примерах в этой статье используетсяant design vue2.0реализация, оant design vue2.0Пожалуйста, обратитесь к2 small.ant DV.com/docs/v UE/in…

Инициализировать среду

В предыдущей статье мы прошлиviteНастроил среду разработки, а по факту сейчасviteОн недостаточно совершенен для поддержки всего проекта, поэтому мы все же решили использовать его в этой статье.vue-cliЛеса для строительства окружающей среды.

Сяобянь использовалvue-cliверсия4.5.4, если ваша версия старше, вы можете пройтиnpm update @vue/cliДля обновления версии скаффолдинга, если он не установлен, можно пройтиnpm install @vue/cli -gустановить

Создайте новый проект, используя строительные леса

  1. Откройте терминал в рабочей области (cmd), а затем поvue create my-vue3-test команда для инициализации проекта

  2. Выберите на первом шагеManually select features, для выполнения функции ручного выбора

  3. затем пройтиSpaceВыберите с помощью клавиши вверх и вниз

    Choose Vue version
Babel
TypeScript
Router
Vuex
CSS Pre-processors
Linter/Formatter

    затем введите

    1. Затем предложите выбратьVueверсия, выберите3.x(Preview)
    2. Use class-style component syntax?выберитеn, то есть вводnзатем введите
    3. А потом подсказываетUse Babel alongside TypeScript,输入y`
    4. Use history mode for routerвойтиn
    5. потомcssВыбор препроцессораLess
    6. eslintвыберитеESLint + Prettier
    7. ПослеLint on saveа такжеIn dedicater config files
    8. Последний способ вернуться, чтобы завершить строительство проекта

Стартовый проект

После создания нового проекта перейдите к проектуcd my-vue3-test, затем выполнитеyarn serveначать проект

После запуска вы можете получить к нему доступ,http://localhost:8080/посетить проект

настроитьant design vue

в текущемVue3.0До того, как официальная версия была выпущена, тем более известный интерфейс в КитаеUIпервый в библиотекеVue3.0унаследовано от домаUIв библиотеке,PCКонец в основномant-design-vue, мобильный терминал в основномvantВесь пример кода, на котором будет основываться эта статьяant-design-vueЧтобы продолжить, сначала мы сначала устанавливаемant-design-vue

  1. Установить зависимости

    yarn add ant-design-vue@2.0.0-beta.6
yarn add babel-plugin-import -D

  2. настроитьant-design-vueнагрузка по требованию

    Перейдите в корневой каталог проекта и откройтеbabel.config.jsфайл, измените содержимое на

    module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    // 按需加载
    [
      "import",
      // style 为 true 加载 less文件
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" }
    ]
  ]
};

  3. попробуй использоватьvue3 + antdvЧтобы добавить немного страницы, мы направимviews/Home.vueЗамените код в файле на

    <template>
  <a-form layout="inline" :model="state.form">
    <a-form-item>
      <a-input v-model:value="state.form.user" placeholder="Username">
        <template v-slot:prefix
          ><UserOutlined style="color:rgba(0,0,0,.25)"
        /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input
        v-model:value="state.form.password"
        type="password"
        placeholder="Password"
      >
        <template v-slot:prefix
          ><LockOutlined style="color:rgba(0,0,0,.25)"
        /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button
        type="primary"
        :disabled="state.form.user === '' || state.form.password === ''"
        @click="handleSubmit"
      >
        登录
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { Form, Input, Button } from "ant-design-vue";
import { reactive } from "vue";

export default {
  components: {
    UserOutlined,
    LockOutlined,
    [Form.name]: Form,
    [Form.Item.name]: Form.Item,
    [Input.name]: Input,
    [Button.name]: Button
  },
  setup() {
    const state = reactive({
      form: {
        user: "",
        password: ""
      }
    });

    function handleSubmit() {
      console.log(state.form);
    }

    return {
      state,
      handleSubmit
    };
  }
};
</script>

    Затем перезапустите проект, вы можете обнаружить, что его можно использовать в обычном режиме.ant-design-vue.

Настройка нового опыта Vue3.0

дляVue3.0Появление, наиболее привлекающее внимание,Vue3.0изComposition API,дляComponsition API, можно сказать, что поляризация особенно серьезна, некоторым людям особенно нравится этот новый метод проектирования и разработки, в то время как другие считают, что использованиеComposition APIЛегко написать код в стиле спагетти (возможно, эти люди не знают ланьчжоуский рамен). в конце концовComposition APIХорошо это или плохо, я не комментирую, я все равно просто грузчик. И этот раздел знакомитsetupто естьComposition APIВход.

Введение в настройку

setupдаVue3.0предоставляет новое свойство, которое можно найти вsetupиспользуется вComposition API, в приведенном выше примере кода мы использовалиsetup, в приведенном выше коде мыsetupпрошедшийreactiveИнициализирует реактивные данные, затем передаетreturnВозвращается объект, который содержит объявленные реактивные данные и метод, и эти данные можно использовать напрямую.template, как в коде выше. оreactive, я дам вам инструкции в следующем подразделе.

описание параметра настройки

setupФункция имеет два параметра, которыеpropsа такжеcontext.

  1. props

    propsдаsetupПервый параметр функции — это свойство, переданное извне компонента, то же самое, что иvue2.0изpropsВ основном то же самое, например, следующий код

    export default {
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  setup(props) {
    console.log(props.value)
  }
}

    Однако следует отметить, что вsetupсередина,propsНельзя использовать деструктурирование, то есть приведенный выше код нельзя переписать как

    setup({value}) {
    console.log(value)
 }

    несмотря на то чтоtemplateиспользуется вsetupвозвращаемый объект, но дляprops, нам не нужноsetupвернулся вtemplateиспользовать, как указано вышеvalue, что может быть непосредственноtemplateНаписано

    <custom-component :value="value"></custom-component>

  2. context

    contextдаsetupВторой параметр функции,contextэто объект, который содержит три свойства, а именно

    • attrs

      attrsа такжеVue2.0изthis.$attrsто же самое, то есть внешний входящий не вpropsсвойства, определенные в . дляattrsа такжеpropsто же самое, мы не можемattrsиспользоватьes6деструктурирование, необходимо использоватьattrs.nameнаписание

    • slots

      slotsСоответствует слоту компонента, сVue2.0изthis.$slotsсоответствуетpropsа такжеattrsТакой же,slotsЕго также нельзя деконструировать.

    • emit

      emitсоответствуетVue2.0изthis.$emit, событие внешнего облучения.

настроить возвращаемое значение

setupОбщая функция Возвращает объект, объект, который содержит компоненты внутри шаблона, который будет использоваться дляdataс некоторыми функциями или событиями, ноsetupВы также можете вернуть функцию, которая соответствуетVue2.0изrenderфункция, которую можно использовать в этой функцииJSX,дляVue3.0используется вJSX, Xiaobian предоставит вам дополнительные инструкции в следующей серии статей.

И последнее, но не менее важное: неsetupиспользуется вthis,существуетsetupсерединаthisи что вам действительно нужноthisотличаетсяpropsа такжеcontextВ основном удовлетворить наши потребности в развитии.

К пониманиюComposition API, начиная сreactiveа такжеrefНачинать

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

export default {
  data() {
    return {
      name: '子君',
      sex: '男'
    }
  }
}

Затем вы можете использовать его там, где это необходимо, напримерcomputed,watch,methods,templateИ другие места, но есть более очевидная проблема, которую я заявляюdataразместить и использоватьdataмогут быть далеко друг от друга в структуре кода, существует君住长江头，我住长江尾，日日思君不见君，共饮一江水ощущение. а такжеComposition APIОчень важной причиной рождения является решение этой проблемы. в Уде на о.Composition APIМотивация решения проблемы описывается следующим образом:

  1. По мере роста функциональности код сложных компонентов становится все труднее читать и понимать. Это особенно распространено, когда разработчики читают код, написанный другими. Основная причина в том, что существующий API Vue вынуждает нас организовывать код по параметрам, но иногда имеет смысл организовывать код по логическим связям.
  2. В настоящее время отсутствует краткий и недорогой механизм для абстрагирования и повторного использования логики между несколькими компонентами.

Теперь давайте разберемсяCompositon APIсерединаreactiveа такжеref

представлятьreactive

существуетVue2.6, новыйapi,Vue.observer,сквозь этоapiможет создать реактивный объект иreactiveкакVue.ovserverФункции в принципе одинаковые. Сначала рассмотрим пример

<template>
  <!--在模板中通过state.name使用setup中返回的数据-->
  <div>{{ state.name }}</div>
</template>
<script>
import { reactive } from "vue";
export default {
  setup() {
    // 通过reactive声明一个可响应式的对象
    const state = reactive({
      name: "子君"
    });
    // 5秒后将子君修改为 前端有的玩
    setTimeout(() => {
      state.name = "前端有的玩";
    }, 1000 * 5);
    // 将state添加到一个对象中然后返回
    return {
      state
    };
  }
};
</script>

Приведенный выше примерreactiveОсновное использование , мы можем увидеть в приведенном выше кодеreactiveа такжеVue.observerМетоды объявления реактивных объектов похожи, но между ними есть некоторые различия. мы используемvue2.0Одна из самых распространенных проблем заключается в том, что некоторые данные явно изменены, но интерфейс не обновляется, в это время вам нужно использоватьVue.setрешить эту проблему, потому чтоVue2.0в использованииObject.definePropertyНе удалось отследить некоторые сценарии, например новые свойства, но прибылиVue3.0прошедшийProxyЭта проблема решена, поэтому мы можем прямо вreactiveДобавьте новые свойства в объявленный объект, взгляните на следующий пример

<template>
  <div>
    <div>姓名:{{ state.name }}</div>
    <div>公众号：{{ state.gzh }}</div>
  </div>
</template>
<script>
import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      name: "子君"
    });
    // 5秒后新增属性gzh 前端有的玩
    setTimeout(() => {
      state.gzh = "前端有的玩";
    }, 1000 * 5);
    return {
      state
    };
  }
};
</script>

Хотя приведенный выше примерstateне заявляет вgzhсвойства, но в5sТогда мы можем напрямую датьstateДобавить кgzhсвойства, вам не нужно использоватьVue.setЧтобы решить проблему, что новый атрибут не может ответить.

В приведенном выше кодеreactiveПередавая объект и возвращаяstate, должны знать об этомstateОн не используется с входящим объектом,reactiveИсходный объект не изменяется, но возвращается совершенно новый объект, а возвращенный объектProxyпример. Следует отметить, что максимально использовать в проектеreactiveВозвращается отзывчивый объект вместо исходного объекта.

const obj = {}
const state = reactive(obj)
// 输出false
console.log(obj === state)

представлятьref

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

// 写法1
let name = '子君'
let gzh = '前端有的玩'
// 写法2
let userInfo = {
  name: '子君',
  gzh: '前端有的玩'
}

Вышеупомянутые два разных метода объявления также различаются, когда мы их используем.1Мы можем использовать переменные напрямую, а для写法2, нам нужно написатьuserInfo.nameПуть. мы можем узнать, чтоuserInfoнаписано сreactiveотносительно похожи иVue3.0Существует также другой способ записи, например写法1то же самое, т.е.ref. Сначала рассмотрим пример.

<template>
  <div>
    <div>姓名:{{ name }}</div>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const name = ref("子君");
    console.log('姓名',name.value)
    // 5秒后修改name为 前端有的玩
    setTimeout(() => {
      name.value = "前端有的玩";
    }, 1000 * 5);
    return {
      name
    };
  }
};
</script>

С помощью приведенного выше кода вы можете сравнитьreactiveа такжеrefразница

  1. reactiveВходящий объект, возвращаемый объект ответа, иrefПередается базовый тип данных (фактически можно использовать и ссылочный тип), и возвращается ответное значение переданного значения.
  2. reactiveПолучить или изменить свойства можно напрямую черезstate.propработать, иrefВозвращаемое значение должно быть переданоname.valueспособ изменения или чтения данных. Однако следует отметить, что вtemplateне нужно проходить.valueчтобы получить значение, это потому, чтоtemplateуже сделали понимание.

существуетVue3.0элегантное использованиеv-model

v-modelнетvue3.0Новые функции, представленные вVue2.0мы прибыли в большом количествеv-model,ноV3а такжеV2Есть еще большая разница. В этом разделе мы в основном покажем вам, какVue3.0используется вv-model,Vue3.0серединаv-modelКакие сюрпризы предлагаются и какVue3.0на заказv-model.

существуетVue2.0а такжеVue3.0используется вv-model

существуетVue2.0Как добиться двусторонней привязки данных? Есть два широко используемых метода, один из которыхv-model, другой.sync, Почему их два? Это связано с тем, что компонент может использоваться только для одногоv-model, но некоторые компоненты должны иметь несколько данных, которые могут отвечать в обоих направлениях, поэтому.sync. существуетVue3.0Для достижения единства понимается, что компонент может иметь несколькоv-model, тоже удалил.sync. Такие, как следующие коды, соответственноVue2.0а такжеVue3.0использоватьv-modelразница.

  1. существуетVue2.0используется вv-model

    <template>
  <a-input v-model="value" placeholder="Basic usage" />
</template>
<script>
export default {
  data() {
    return {
      value: '',
    };
  },
};
</script>

  2. существуетVue3.0используется вv-model

    <template>
  <!--在vue3.0中，v-model后面需要跟一个modelValue，即要双向绑定的属性名-->
  <a-input v-model:value="value" placeholder="Basic usage" />
</template>
<script>
export default {
  // 在Vue3.0中也可以继续使用`Vue2.0`的写法
  data() {
    return {
      value: '',
    };
  },
};
</script>

    существуетvue3.0середина,v-modelдолжен сопровождатьсяmodelValue, то есть имя свойства, которое должно быть двусторонним,Vue3.0давая разныеv-modelуказать разныеmodelValueдля достижения несколькихv-model. дляv-modelПринцип следующего будет настроенv-modelобъяснить.

настроитьv-model

использоватьVue2.0пользовательскийv-modelПример
  1. код компонента
<template>
  <div class="custom-input">
    <input :value="value" @input="$_handleChange" />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    $_handleChange(e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

  1. Используйте компоненты в коде

    <template>
	<custom-input v-model="value"></custom-input>
</template>
<script>
	export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>

    существуетVue2.0Мы делаем это, устанавливая компонент с именемvalueсвойство также запускает namedinputсобытие для достиженияv-model, ну и конечно же поmodelЧтобы изменить имя атрибута и имя события, вы можете увидеть подробное объяснение в моей предыдущей статье.

использоватьVue3.0пользовательскийv-modelПример

  1. код компонента

    <template>
  <div class="custom-input">
    <input :value="value" @input="_handleChangeValue" />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  name: "CustomInput",
  setup(props, { emit }) {
    function _handleChangeValue(e) {
      // vue3.0 是通过emit事件名为 update:modelValue来更新v-model的
      emit("update:value", e.target.value);
    }
    return {
      _handleChangeValue
    };
  }
};
</script>

    1. Используйте компоненты в коде

      <template>
  <!--在使用v-model需要指定modelValue-->
  <custom-input v-model:value="state.inputValue"></custom-input>
</template>
<script>
import { reactive } from "vue";
import CustomInput from "../components/custom-input";
export default {
  name: "Home",
  components: {
    CustomInput
  },
  setup() {
    const state = reactive({
      inputValue: ""
    });
    return {
      state
    };
  }
};
</script>

    прибытьVue3.0, так как компонент поддерживает несколькоv-model,такv-modelИзменился метод реализации. Во-первых, нам не нужно использовать фиксированные имена свойств и имена событий.В приведенном выше примере, потому что этоinputПоле ввода, имя атрибута, которое мы все еще используем,value, но может быть любым другим, напримерname,data,valи т. д., а имя события, отображаемое после изменения значения, становитсяupdate:value,Прямо сейчасupdate:属性名. И в том месте, где вызывается компонент, он же используетсяv-model:属性名различать разныеv-model.

Суммировать

В этой статье мы в основном объясняем построение среды разработки,setup,reactive,ref,v-modelд., и в то же время путем сравненияVue3.0а такжеVue2.0разные, пусть всеVue3.0С определенным пониманием, в дальнейшем мы представим вам больше сведений, таких как технические атрибуты,watch, жизненный цикл и т. д., так что следите за обновлениями. Эта статья была впервые опубликована в общедоступном аккаунте [некоторые игры во внешнем интерфейсе], узнайтеVue, вопросы для интервью, все в [в интерфейсе немного поиграть],乘兴裸辞心甚爽，面试工作屡遭难。 幸得每日一题伴，点击关注莫偷懒。, новая статья будет опубликована в следующий понедельник, скоро увидимся.

Эпилог

Не истощайте свое вдохновение и воображение, не будьте рабом своих моделей. - Винсент Ван Гог

Категории