What you need to know to get started with VUE3

I had the honor to participate in the company’s VUE3 project development once, and sorted out some new features of VUE3 after the project.

Improvements and features of Vue3

1. Performance improvement: 41% reduction in package size, 55% faster initial rendering, 133% faster update, 54% reduction in memory usage. (Official words from CV)

2. The new Composition API makes components easier to maintain and reduces unwanted data binding pages.

4. Better TypeScript support, which can be configured directly in the create command for seamless page integration.

5.Teleport(transient components), Suspense(solve asynchronous component loading problems) and global API modification and optimization.

6.Vue3 is compatible with most of the features of Vue2, and can be developed with Vue2 code. However, in vue3. X, the setup method is executed first, followed by other 2.x-compatible methods such as data, computed, watch, and so on, and during setup execution, attributes defined in Data cannot be accessed because the data method has not yet been executed

Let’s start with VUe2:

<template>
  <div class="index">
  </div>
</template>

<script>
export default {
  name: 'index'.components: {},filters: {},mixins: [].props: {
  },

  data () {
    return{}},computed: {},watch: {
  },

  mounted () {
  },

  methods: {}}</script>

<style lang="scss" scoped>

</style>

Copy the code

Vue3:

<template>
</template>

<script>
export default {
 name: 'index'.components: {},props: {},setup(props,context) {
 return{}}</script>

<style lang="scss" scoped>

</style>
Copy the code

Vue3 project vuUE – CLI scaffolding creation:

// Install or upgrade NPM install -g@vue /cli // Check the version. Ensure that the CLI version of vue is later than 4.5.0. Vue --version // Create a project // Then follow the prompts step by stepCopy the code

Create a VUE3 project using Vite:

Vite official website: vite official website more learning can be viewed vite official website, has explained the very detailed.

Vite is a new front-end building tool that has a qualitative improvement in performance compared to traditional WebPack.

// Initialize the viete project NPM init vite-app <project-name> // go to the project folder CD <project-name> // Install dependency NPM install // Start project NPM run devCopy the code

The life cycle

See this article for details

template

Vue3 allows us to have multiple root nodes

setup

Setup is a new option in Vue3. X, which is the entry point to the Composition API within a component and the first function to use.

usesetupWhen, it takes two argumentssetup(props,context)

Props: Properties passed by the component

Props: is an object that holds the data passed by the parent component to the child component and all properties received by the child component using props.

The props received in setup are reactive and are updated as new props are passed in. Because it is reactive, ES6 deconstruction cannot be used, because deconstruction eliminates its reactive. ToRefs can be used if you want to use deconstruction while preserving its responsiveness

Context: a context object that can be passedes6Grammar deconstructionsetup(props, {attrs, slots, emit})

Attrs: Gets any objects on the current component tag that do not have properties received by props, equivalent to this.$attrs

Slots: The object that contains all the incoming slot content, equivalent to this.$slots

Emit: A function used to distribute custom events, equivalent to this.$emit

This object is not available in setup, so the context object exposes three attributes attrs, slots, and emit in setup(). Since no Vue instance has been created in the setup function, Attrs, vm. Attrs, vm. Attrs, vm.

setupMethods are executed only once in the component’s life cycle, not repeatedly, all of themComposition APIFunctions are used here.

All code logic will be insetupMethod, includingdata,watch,computed,methods,hooksAnd no longerthis.

setupIt can’t be aasyncFunction, because the return value is no longerreturnObject, butpromise, cannot be used in the templatereturnReturns the data of the object in.

In VUe2. X, data is defined in data, but Vue3. X can use Reactive and ref to define data. Reactive handles bidirectional binding of objects, and REF handles bidirectional binding of js base types

reactive

const people = reactive({
  name: 'Joe'.age: 18.sex: 'woman'
})
Copy the code

ref

Define a reactive data (typically used to define a basic type of reactive data Undefined, Null, Boolean, Number, and String)

const time = ref(null)

const number = ref(0)

const name = ref('Joe')

const isTrue = ref(false)

const arr = ref([1.3.4.56.6])
Copy the code

XXX. Value is used to manipulate data in script, but. Value does not need to be added to templates

 setup() {
    // ref is used to define a responsive data that returns a ref object with a value attribute
    // If you need to manipulate data, use the value attribute of the Ref object
    const count = ref(0);
    function updateCount() {
      count.value++;
    }
    return {
      count,
      updateCount,
    };
  },

Copy the code

In Vue2 we get the DOM node through this.$refs, and in Vue3 we get the dom node through ref

You need to add ref=’ XXX ‘to the label, and then setup a ref type with an initial value of null and a name that matches the label’s ref attribute

Must be insetupthereturn, or an error will be reported.

Instead of deconstructing an object defined by Reactive, which would eliminate its responsiveness, toRefs can be used to convert a Reactive object into a normal object whose properties are all ref objects

const state = reactive({ foo: 1.bar: 2 }) 
const stateAsRefs = toRefs(state) 
Copy the code

change

Slot: In Vue2. X, named slots and scoped slots are implemented using slot and slot-scope respectively. In Vue3.0, slot and slot-scope are combined to use V-slot.

• vue2

<! -- Subcomponent: --><slot name="title"></slot><! <template slot="title"> <h1> Vue2 slot </h1> <template>Copy the code

• vue3

<! -- used in parent component --><template v-slot:title>
   <div>Vue3 slot</div>
</template>
Copy the code

v-model:

• Change: When v-Models are used on custom components, the default names of properties and events change

• Changed: V-bind’s.sync modifier was removed in Vue 3 and incorporated into the V-model

• Added: Multiple V-Models can be set for the same component

• New: Developers can customize v-Model modifiers