Detailed explanation of Vue3.0 + TypeScript + Vite first experience

Project Creation

npm:

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

or yarn:

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

Project Structure

main.js

In my opinion, createApp() is an instance of vue application, and createApp supports chain calls.

App.vue:

This is the syntax compatible with vue2.0. The following is the vue3.0 rfc writing method (still in the experimental stage).
rfc official description

setup

data

Setup combines the created lifecycle function of vue2.0 with data and methods (mentioned later)

Can directly export attributes (data) and methods (methods)

It can be seen that the current name is not responsive. Responsiveness will be introduced later.

methods

Methods are the same as data, export directly

Effect:

Composition API

ref

statement:

Ref can make some basic properties responsive

reactive

The above picture shows the mixed use of reactive and ref. As for the effect, please copy the code below to experience it.

<template>
 <div id="app">
 <div v-for="(item, index) in state.persons" :key="index">
  {{ item.name }} is {{ item.age }} years old</div>
 <div>
  <h3>Modify zhangsan's age</h3>
  <input type="text" v-model="zAge" />
 </div>
 </div>
</template>

<script lang="ts" setup="props, {emit}">
import { reactive, ref } from 'vue'
export const zAge = ref(12)
export const state = reactive({
 persons:
 {
  name: 'zhangsan',
  age: zAge
 },
 {
  name: 'lisi',
  age: 20
 }
 ]
})
</script>

computed

statement:

Effect:

watchEffect

statement:

Effect:

Component system

Global Registration

App.vue

main.js

Partial Registration

App.vue

setup

props

Declare the props object. In watchEffect, console.log(props.msg) is used to see the value passed by the parent component. Default values ​​and filtering of props are under study. For specific functions, please refer to the function of vue2.0 props

context

Component Context

emit

Declare the emit function. Write emit in setup="props, { emit }", otherwise an error will be reported. For specific functions, please refer to the emit function in vue2.0.

Here are some examples of using the emit function.

attrs

Researching…

slots

Researching…

vue directives

Focus on v-model, other vue instructions are the same as 2.0

v-model

Vue3.0 began to support multiple two-way binding parameters, which was not available in vue2.0. If there are no other attributes after v-model, then its default value inside this component is modelValue. If you want to update v-model, you need to emit('update:modelValue', data) to update the default value modelValue of v-model. If there is an attribute (dragValue) after v-model, then its value inside this component is this attribute name (dragValue). If you want to update the value of v-model:dragValue, you need to emit('update:dragValue', data) to update the custom value of v-model.

For more usage, refer to the official documentation: https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md

This is the end of this article about the initial experience of Vue3.0 + TypeScript + Vite. For more related Vue3.0 TypeScript Vite content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!