Commonly used Composition API--project files and setup

Official document: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

Analyzing Engineering Structures

What's newly added or modified in vue3

First, import { createApp } from 'vue' is no longer a Vue constructor, but a createAPP factory function. What is a factory function?

Ordinary functions still need new, but this one does not need new, and the first letter is lowercase

Indeed fewer attributes than on the previous vm

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false
})

Turn off syntax checking

Use a timer to realize the unloading of the page

Pay attention to the wording of vue2 new an object to achieve mounting, it cannot be used in Vue3, and an error will be reported

This is one of the biggest differences between v3 and v2. The template structure in the v3 component can have no root tag

Install developer tools

Just go to the Google store to find the latest vue developer tools

initial setup

Understanding: A new configuration item in Vue3.0, the value is a function.

setup is all ``Composition API (combination API)``" stage of performance"` `.

The components used in the components: data, methods, etc., must be configured in the setup.

Two return values of the setup function:
1. If an object is returned, the properties and methods in the object can be used directly in the template. (Focus!)

2. If `` returns a rendering function: you can customize the rendering content. (learn)

Use the h that comes with vue, there are two values in it, the first is the created label, and the second is the content

Of course, v3 is backward compatible, and can also be written in v2

Points to note:
1. Try not to mix it with Vue2.x configuration
- `` can access ` in Vue2.x configuration (data, methos, computed...) Attributes and methods in `setup.
- But `` cannot access `` Vue2.x configuration (data, methos, computed...) in the setup.
- If there is a duplicate name, setup takes precedence.
2. setup cannot be an async function, because the return value is no longer the return object, but a promise, and the template cannot see the properties in the return object. (You can also return a Promise instance later, but it requires the cooperation of Suspense and asynchronous components)

v2 can get the data of v3, but v3 cannot get the data of v2, and the data of v2 is undefined