This is the 22nd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

If you feel helpful, please click 👍 to encourage you

Create a Vue3 project

Create it using vue-CLI

Enter the command and select configuration items to install

// Install or upgrade
npm install -g @vue/cli
// Ensure that the Vue CLI version is later than 4.5.0
vue --version
// Create the project
vue create my-project
Copy the code

Create using vite

// Initialize viete project
npm init vite-app <project-name>
// Go to the project folder
cd <project-name>
// Install dependencies
npm install
// Start the project
npm run dev
Copy the code

The Vue3 project is initialized

This article focuses on projects created using vue-CLI; the use of Vite will be covered separately in the future

shims-vue.d.ts

Let TS know the.vue file

declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}
Copy the code

main.ts

// Add createApp to create an instance of the application
import { createApp } from 'vue';
// Import the app component (the parent of all components)
import App from './App.vue';
// Create app return the corresponding instance object, call the mount method to mount to the #app node
createApp(App).mount('#app');
Copy the code

app.vue

The first difference between Vue3 and Vue2

The HTML template of the Vue2 component must have a pair of root tags. The HTML template of the Vue3 component may have no root tags

// The HTML template of the Vue2 component must have a pair of root tags. The HTML template of the Vue3 component can have no root tags
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <! -- Using child components -->
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</template>

<script lang="ts">
// We can write TS code here

// defineComponent function, which defines a configuration object that can be passed inside a component
import { defineComponent } from 'vue';
// Introduce child components
import HelloWorld from './components/HelloWorld.vue';

// Expose a defined component
export default defineComponent({
  // The name of the current component
  name: 'App'.// Register the component
  components: {
    // Register a child component
    HelloWorld,
  },
});
</script>
Copy the code

setup

  • The new option, where all composition API functions are used, is executed only once during initialization
  • Is the entry function in the composition API and the first function to be used
setup() {
  console.log('I did it.') // I executed it
},
Copy the code
  • A function that returns an object, property or method in the object, can be used directly in a template
//templete
<div>{{number}}</div>

//JS
setup() {
  const number = 18;
  return {
    number,
  };
},
Copy the code

ref

  • Function: Define a reactive data (generally used to define a basic type of reactive data)
  • Const XXX = ref(initValue):
    1. Create a reference object that contains responsive data
    2. Js operation data: xxx.value
    1. To manipulate data in a template:.value is not required

To implement a button, click to add a number

<template>
  <div>{{count}}</div>
  <button @click='updateCount'>increase</button>
</template>
Copy the code

In Vue2

data() {
  return {
    conunt: 0}; },methods: {
  updateCount() {
    this.conunt++; }},Copy the code

In Vue3

 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
  • Use the ref function to get the label elements in the component
  • Function requirements: let the input box automatically get focus
<template>
  <h2>App</h2>
  <input type="text">---
  <input type="text" ref="inputRef">
</template>

<script lang="ts">
import { onMounted, ref } from 'vue'
/* ref gets elements: Use the ref function to get label elements in the component
export default {
  setup() {
    const inputRef = ref<HTMLElement|null> (null)

    onMounted(() = > {
      inputRef.value && inputRef.value.focus()
    })

    return {
      inputRef
    }
  },
}
</script>
Copy the code

reactive

  • Function: Defines a response for multiple data
  • Syntax :const proxy = reactive(obj): a reactive proxy object that receives a common object and returns that common object
  • Reactive transformations are “deep” : all nested properties within the object are affected, and all data is reactive
<template>
  <h3>Name: {{user. The name}}</h3>
  <h3>Age: {{user. Age}}</h3>
  <h3>wife:{{user.wife}}</h3>
  <button @click="updateUser">update</button>
</template>


 setup() {
    const user = reactive({
      name: 'hzw'.age: 18.wife: {
        name: 'xioaohong'.age: 18.books: [The Little Red Book.'Design Patterns'.'Algorithms and Data Structures'],}});const updateUser = () = > {
      user.name = 'little red';
      user.age += 2;
      user.wife.books[0] = 'Golden Bottle plum';
    };
    return {
      user,
      updateUser,
    };
  },
Copy the code